jQuery Image Center

Centers an image by moving, cropping and filling spaces inside its parent container. Maintains aspect ratio.

Project maintained by BOXLIGHT Hosted on GitHub Pages —

Description

Centers an image by moving, cropping and filling spaces inside its parent container. This plugin maintains aspect ratio giving it a very professional looking finish in most situations.

Features

Works on IE7, IE8, IE9, Safari, Chrome, Firefox
Waits for the image to be loaded and fixes IE cached image bug
Supports filling entire space or keeping entire image visible
Always maintains the aspect ratio

Installation

As with most plugins, include the downloaded javascript file in your page after jQuery itself:

Examples

To demonstrate how this works, let's use this cute Moshi Monster which is 275 x 284 pixels.

A situation will occassionally arise where you need to show a bunch of these monsters, for example in a list of status updates which have the icon alongside, but to keep the design consistent they all need to fit the same area and your thumbnails might not be the exact size you require for whatever reason.

Here is how this would look in a list where each image has a parent container of 200 x 200 pixels.

As you can see we can't see half of our poor monster because of the forced dimensions. This is easily fixed using this plugin by running the following:

This is what they look like now:

This has cropped and repositioned the image inside the container to provide a more desireable effect.

By default, the plugin uses outside mode which ensures there is no white space by resizing the image to fit the entire parent container. There is however support for inside mode which will center the image and keep it fully visible with no cropping. This is achieved by passing 'inside' as the first parameter to centerImage()

Please note: In most cases it's more efficient to use max-width and max-height CSS properties on the image tag to achieve this effect. However, this plugin will vertically center landscape images when CSS only will not.

To demonstrate this we'll use this guy who clearly seems OK with us choosing him:

This is how it appears without any intervention:

And here it is using inside as described above:

To better understand the difference, here is what it looks like when we use the default setting by calling centerImage() without any parameters:

Any bugs, suggestions or improvements please report them on Github.