imagecenterd v1.6.0

imageCenterd

A jQuery Plugin

Center images of variable width and height (any variation of aspect ratios) horizontally and vertically in a div.

Usage

Center images of varying sizes vertically and horizontally inside a box.

Demo

You can set the height of the box in the plugin options (default is 240px). The plugin measures the width of the box and does math to set the size of the image. This way, the box can have a flexible width.

You also need to specify a class for the images inside the box. The plugin by default targets .thumb but you can set it to whatever you need to in the options.

HTML

<div class="image-box">
	<img src="images/someimage.jpg" alt="this image" class="thumb">
</div>

Include Scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/imagecenterd.js"></script>

Call Function Without Options (be sure to use the default .thumb class on your images)

$( ".image-box" ).imageCenterd();

Or Call Function With Options (boxHeight and imgClass are the only options)

$( ".image-box" ).imageCenterd({
	boxHeight: 260,
	imgClass: ".some-class"
});

Fun Facts:

• Images must not be set to any max-width
• If image aspect ratio is less than one, it is a vertical image
• If image aspect ratio is greater than one, it is a horizontal image
• If image aspect ratio is less than box aspect ratio, it is more taller than wider than the box
• If image aspect ratio is greater than box aspect ratio, it is more wider than taller than the box

Math:

NEW height = VARIABLE width * original height / original width

NEW width = VARIABLE height * original width / original height

License

Licensed under the terms of the MIT license.

Notes

Built by Jeannie Stevenson using oxford commas, enthusiasm, and brains.