imgLiquid

A jQuery Plugin to resize images to fit in a container. More info: https://github.com/karacas/imgLiquid

by karacas

HTML

<script src="https://rawgithub.com/karacas/imgLiquid/master/js/imgLiquid-min.js"></script>
<div class="boxSep" >
    <div class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
        <img alt="" src="https://vignette.wikia.nocookie.net/p__/images/7/7c/Woody.jpg/revision/latest?cb=20120701212443&path-prefix=protagonist"/>
    </div>
</div>

<div class="boxSep" >
    <div class="imgLiquidNoFill imgLiquid" style="width:250px; height:250px;">
        <img alt="" src="https://vignette.wikia.nocookie.net/p__/images/7/7c/Woody.jpg/revision/latest?cb=20120701212443&path-prefix=protagonist"/>
    </div>
</div>

CSS

.boxSep{
    background-color:#f7f7f7;
    border: 2px solid #ccc;
    margin:10px;
    display:inline-block;
}

JavaScript

$(function() {
    
    $(".imgLiquidFill").imgLiquid({
        fill: true,
        horizontalAlign: "center",
        verticalAlign: "top"
    });
    
    $(".imgLiquidNoFill").imgLiquid({
        fill: false,
        horizontalAlign: "center",
        verticalAlign: "50%"
    });
    
});