JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Img Liquid

    jQuery plugin to resize images to fit in a container.
    Filed under  › 

    • 🔾39%Overall
    • 985
    • 29.5 days
    • 🕩212
    • 👥8

    ScreenShot

    imgLiquid v0.9.944 / 11-04-2013

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

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

    ##

    Usage

    Include:

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

    js:

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

    Html:

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

    View in action:

    http://jsfiddle.net/karacas/3CRx7/#base

    http://codepen.io/karacas/pen/nlugd

    Features:

        - Uses CSS Background-size when is available. (new!)
        - Bootstrap compatible.
        - Lightweight: < 2.0KBs gzipped.
        - Fill / Crop.
        - Align.
        - Responsive.
        - Svg support.
        - CallBacks.
        - HTML5 data-* attributes.
        - All browsers (Incl. ie6).
    

    Options:

    
        >js
            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){}
    
        >hml5 data attr (overwrite js options)
            data-imgLiquid-fill="true"
            data-imgLiquid-horizontalAlign="center"
            data-imgLiquid-verticalAlign="50%"
    
    Show All