imgCentering.js – Centering Images with jQuery

by Kenny on
imgCentering.js is a lightweight jQuery plugin which help to centering your images as well as re-sizing it accordingly while maintains it's original ratio.

Look Inside

imgCentering.js is a lightweight jQuery plugin (about 1kB with minified) that help to center and resize images/pictures based on its original ratio within a fix dimension container.

imgCentering.js jQuery plugin

View Demo Download Files

The reason I wrote this plugin is because I had faced some difficulty in centering my images during my work due to non-standard sizes of images provided by clients. Perhaps you had faced this before. So I decided to convert my script to a simple jQuery plugin and hope it could save your day!

By the way, it is not advised to stretch your images like this. If possible you should resize and crop them using back-end method or manually, unless in some special cases like what I faced. =)
 

How It Works

imgCentering.js will NOT crop your images, but it will centering them inside a fix dimension container while hide those oversize part of images using CSS overflow properties. Also, it manages to resize your images according to its container while maintain its original ratio.
 

Support

[browser]This jQuery plugin works well in all browsers.[/browser]

imgCentering.js should works well with jQuery 1.7.1 and above (haven’t tested for lower version).

 

How to Use

1. First, include imgCentering.js script files after jQuery library file  inside <head> tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/imgcentering.js"></script>

2. Next, wrap each image inside a container (div, a, or etc) and set a WIDTH and HEIGHT on it using CSS if haven’t yet! For instance:

<a href="#" class="container">
	<img src="sample1.jpg" alt="" />
</a>

The script won’t works well if the images are not wrapping inside a fix width and height container.

3. Last, call .imgCentering() function on your images object in any place of your HTML!

$(document).ready( function() {
	$(".container img").imgCentering();
});

Refer to configuration section for all available options.

 

Configuration:

.imgCentering( [Options] )

Options: An array to configure centering effects.

Options

There are few options available in imgCentering.js.

NameTypeValueDescription
forceWidthBooleanfalseForce image width same to it’s container’s width.
forceHeightBooleanfalseForce image height same to it’s container’s height.
forceSmartBooleanfalseAuto detect which option (forceWidth or forceHeight) is better, hence leave no empty space.
bgColorColor Hex”inherit”Background color for empty space.

 

License

imgCentering.js is licensed under the GNU General Public License version 2 or later. In other words, you can do whatever you like to the source code. =)

 

Change Log

Version 1.118th October 2012 – #Bug fix: Failed to set position in Chrome.
– #Change: bgColor default value changed to “inherit”.
– #Change: Image resize with fluid size.
Version 1.029th September 2012– Initial Release.

 

Question?

Something’s not working? Or any other questions regarding this plugin please let me know using comments form below. Thanks!!!

Don't enjoy alone, share with your friends also
Read Next

7 Responsive Layout Design Helpers by jQuery Plugins