Resize Images To Fit In A Container - imgLiquid

imgLiquid is a jQuery Plugin which can be use to resize images to fit in a container.

See also:

• Dynamic Image Resizing Plugin with jQuery
• jQuery Plugin for Client Side Image Resizing - canvasResize

How to use it:

1. Include jQuery Library and imgLiquid.js in your head section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="js/imgLiquid-min.js"></script>

2. Call the function

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

3. Markup

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

4. CSS

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

Change Log:

2017-02-25

• Image smaller than the container should not be upscaled when "fill" is set to false

v0.9.944 (2013-11-05)

• Fix URL fails if url filespec contains parenthesis

v0.9.943 (2013-05-11)

• Update to latest version

v0.9.75 (2013-04-11)

• Update to latest version

v0.8.2 (2013-04-11)

• fix onload

---

This awesome jQuery plugin is developed by karacas. For more Advanced Usages, please check the demo page or visit the official website.