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.
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!!!