img width percent, height crop

by zunme

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/holder/2.6.0/holder.min.js"></script>
<div class="container">
    <img class="thumb" src="http://crayondata.cyworld.com/img_toon/388287_w.jpg" data-src="http://cymovieimg.cyworld.com/upload/event_new/201504/ad_banner_0417145439.jpg" />
</div>
<div class="container">
    <img class="thumb" src="http://crayondata.cyworld.com/img_toon/388287_w.jpg" data-src="http://cymovieimg.cyworld.com/upload/event_new/201504/nate_7_main_121603.jpg" />
</div>

CSS

.container {
    width:90%;
    border: 1px solid #999;
    padding:0;margin:0;
}
.container img{
    width:100%;
    padding:0;margin:0;
}

JavaScript

$(document).ready( function () {
    var thumbheight =$(".thumb:first").height();
    $(".container").each (function () {
        var target  = $(this);
        var imgPreload = new Image();
        
        $(this).css('height' ,thumbheight).css("overflow","hidden");
        $(imgPreload).attr('src',$(this).children("img").attr("data-src"));
        console.log ( $(this).children("img").attr("data-src") );
        $(imgPreload).load( function () {
            $(imgPreload).prependTo(target);
            target.children("img:last").remove();
        });         
    });
    
});