imgLiquid

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

HTML

<script src="https://rawgithub.com/karacas/imgLiquid/master/js/imgLiquid-min.js"></script>
<header></header>
<div class="sy-box">
    <div class="sy-slides-wrap">
        <div class="sy-slides-crop">
            <ul class="ken-slider sy-list">
<li class="sy-slide">
    <img alt="" src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/></li>
</ul>
        </div>
    </div>
</div>
<!--
<div class="boxSep" >
    <div class="imgLiquidNoFill imgLiquid">
        <img alt="" src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/>
    </div>
</div> -->
<footer></footer>

CSS

html, body{width:100%;height:100%; padding:0; margin:0;}
.sy-box{
    background-color:#f7f7f7;
    width:100%;
    height:calc(100% - 391px);
    display:inline-block;
}
.sy-slides-wrap{
    height:100%;
}
header{width:100%;height:293px;background-color:#ff6600;}
footer{width:100%;height:94px;background-color:#ff6600;}

JavaScript

$(function() {    
    $(".sy-slides-wrap").imgLiquid({
        fill: false,
        horizontalAlign: "center",
        verticalAlign: "50%"
    });
    
});