Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
jQuery plugin to resize images to fit in a container.
JavaScript

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
dev
examples
src
README.md
imgliquid.jquery.json
license.txt

README.md

ScreenShot

imgLiquid.js v0.76 - 08-11-12

A jQuery Plugin to resize images to fit in a container.

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

 

Usage

Include:

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

js:

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

Html:

<div class="imgLiquid" style="width:300px; height:200px;">
    <img alt="Woody" src="Woody.jpg" />
</div>

css:

/*
Important:  
    set "visibility:hidden" for better results
    or use src/css/imgLiquid.js.css
*/
.imgLiquid img{
    visibility:hidden;
}

 

View in action:

http://goo.gl/Wk8bU

or play with it:

http://jsfiddle.net/karacas/3CRx7/#base
http://codepen.io/karacas/pen/nlugd

 

Features:

    - Lightweight: less than 2KBs gzipped.
    - Align.
    - Fill/Crop.
    - Responsive (Optional, default is off).
    - Svg support.
    - CallBacks.
    - FadeIn Anim (Optional, default is off).
    - All browsers (Incl. ie6).

 

Options:

    >js
        fill: true,
        verticalAlign:      //'center' //'top'  //'bottom'
        horizontalAlign:    //'center' //'left' //'right'
        fadeInTime: 0,
        delay: 0,           //time to process next image in milliseconds
        responsive: false,
        responsiveCheckTime: 500,   //time to check resize in milliseconds

    >js callBakcs
        onStart:        function(){},
        onFinish:       function(){},
        onItemResize:   function(index, container, img){},
        onItemStart:    function(index, container, img){},
        onItemFinish:   function(index, container, img){}

    >css (set useCssAligns: true) (overwrite js)
        text-align: center;
        vertical-align : middle;

    >hml5 data attr (overwrite all)
        data-imgLiquid-fill="true"
        data-imgLiquid-horizontalAlign="center"
        data-imgLiquid-verticalAlign="center"
        data-imgLiquid-fadeInTime="500"
Something went wrong with that request. Please try again.