Javascript Resize Image Proportionally and Clipping

Setting height and width to an image is a general scenario in web development. We need to take in account that image shouldn’t get stretched, it should be resized based on aspect ratio. So I created a javascript helper which resizes the image proportionally based on the traget-height and target-width instead of setting the height and width directly. Also in some case we need to resize the image proportionally from center and clip the remaining area that goes out of the target-height and width. 

Here you find the demo http://jsfiddle.net/sesubash/Jq2Rv/2/

Here you go for the source. https://github.com/sesubash/Javascript-Image-Resizer

Usage – html

<img id="myImg" src="url.jpg" onLoad="resizeImage(this)">
<img id="clipImage" src="url.jpg" onLoad="clipImg(this)">

JavaScript

function resizeImage(img){
    ImageResizer.fixImage(img,215,217); 
}

function clipImg(img){
    ImageResizer.clipImage(img,215,217); 
}

Hope this helps for some one.

Cheers!