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!
Thanks, works like charm!
Now I merely couldn’t resist. I just had to write something on this awesome entry. Maintain the excellent job!
What’s up, I want to subscribe for this webpage to take most recent updates, so where
can i do it please help.
Hi,
Thanks for your interest. Subscription module will be added ASAP.
Greetings! Very useful advice in this particular article!
It’s the little changes which will make the
largest changes. Many thanks for sharing!
Hi there, I found your website by way of Google whilst searching for a similar matter, your site came up, it seems great.
I’ve bookmarked it in my google bookmarks.
Hi there, just was aware of your blog thru Google,
and found that it is really informative. I am going to watch out for brussels.
I’ll be grateful if you continue this in future.
Many people will be benefited from your writing.
Cheers!
Fine way of explaining, and pleasant paragraph to
obtain facts regarding my presentation subject matter, which i am going to deliver in university.