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.
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
Include Scripts
Call Function Without Options (be sure to use the default .thumb
class on your images)
;
Or Call Function With Options (boxHeight
and imgClass
are the only options)
;
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.