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.

Name Type Value Description
forceWidth Boolean false Force image width same to it’s container’s width.
forceHeight Boolean false Force image height same to it’s container’s height.
forceSmart Boolean false Auto detect which option (forceWidth or forceHeight) is better, hence leave no empty space.
bgColor Color 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.1 18th 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.0 29th 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