Rezise the image according to div size
HTML
<div id="image">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSsDlG5gJWiRcmUsYVX5OJVohhwpIxUzZ3WL9qbpCZ1IdSIft0F" />
</div>
CSS
#image {
width:100%;
height:200px;
overflow:hidden;
position:relative;
}
#image img {
width:200px;
height:100%;
position:absolute;
bottom:0;
left:0;
}
JavaScript
$(window).bind('resize', function () {
var container_height = $('#image').height();
var container_width = $('#image').width();
var image_height = $('#image img').height();
var image_width = $('#image img').width();
if (container_width > image_width) {
$('#image img').css({
'width': '100%',
'height': 'auto'
});
$(window).trigger("resize");
} else if (container_height > image_height) {
$('#image img').css({
'width': 'auto',
'height': '100%'
});
$(window).trigger("resize");
};
});
$(window).trigger("resize");