How to zoom image to make it fit to width of div

There is common problem when display image in web page, the width of the image size may too big to fit into the page. Suppose there are two columns float in a div, the left float will display an image, the right float will show text.

 
<style>
.outer {
    display: inline-box;
}
.image-left {
    float: left;
    width: 400px;
}
 
.image-left a {
     display: block;
}
 
.text-right {
    float: right;
    width: 300px
}
</style>
<div class="outer">
<div class="image-left"><a href=""><img src="/images/fresh-squeezed-orange-juice1.jpg"/></a></div>
<div class="text-right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
</div>
 
 

You may end up with something like this:

javascript zoom image width

First lets add overflow hidden to div that contains image

 
.image-left {
    float: left;
    width: 400px;
    overflow: hidden
}
 

This will confine the image from displaying outside of the box.

But now the image can not be fully displayed.

The following javascript make the image fit to width of its parent block element.

 
<script>
$('div.image-left img').on('load',function(){
    var css;
    var ratio=$(this).width() / $(this).height();
    var pratio=$(this).parent().width() / $(this).parent().height();
    if (ratio < pratio) css={width:'auto', height:'100%'};
    else css = {width:'100%', height:'auto'};
    $(this).css(css);
});
</script>
 

Finally, we get what we want.