Fit images in container with jQuery – imgLiquid plugin

A problem with re-sizing images, to fit them in RWD projects? Try this jQuery plugin, which easy resizes images to fit in a container.

imgLiquid plugin – fit images in container with jQuery

No magic, no workarounds. Just a jQuery plugin to resize images to fit in a container.

Key features:

Bootstrap compatible

– Lightweight

– Fill / crop and align

– Responsive

– SVG support

– Callbacks and HTML5 data-* attributes

– All browsers (even IE6)

– Uses CSS Background-size when is available (NEW)

imgLiquid - fit images in container
imgLiquid – fit images in container

Usage

1. Include the plugin:

<script src="js/imgLiquid-min.js"></script>

2. Prepare HTML elements:

<div class="imgLiquidFill imgLiquid" 
    style="width: 300px; height: 200px;">
    <img alt="Compile and load, in debug mode..." src="debug.jpg" />
</div>
...

3. Run JS code:

$(document).ready(function() {
    $(".imgLiquidFill").imgLiquid();
});

That’s it! However there are some options, that we can adjust.

In JavaScript:

...
fill: true,
verticalAlign: // 'center' | 'top' | 'bottom' | '50%'  | '10%'
horizontalAlign: // 'center' | 'left' | 'right' | '50%' | '10%'

// CallBacks
onStart:        function(){},
onFinish:       function(){},
onItemStart:    function(index, container, img){},
onItemFinish:   function(index, container, img){}

In HTML5 – data attributes, that overwrite JS options:

data-imgLiquid-fill=”true”

data-imgLiquid-horizontalAlign=”center”

data-imgLiquid-verticalAlign=”50%”

Author: Alejandro Emparan (karacas, @krc_ale). Dual licensed under the MIT and GPL licenses.

Demo:

http://goo.gl/Wk8bU

Get in from GitHub:

https://github.com/karacas/imgLiquid

You may also like:

Responsive product grid layout with CSS3, JS and Modernizr

Fresco – beautiful responsive lightbox

Enjoy!