Javascript Image Resize

Question

Does anyone know how to resize images proportionally using JavaScript?

I have tried to modify the DOM by adding attributes height and width on the fly, but seems did not work on IE6.

Answer 1

To modify an image proportionally, simply only alter one of the width/height css properties, leave the other set to auto.

image.style.width = '50%' image.style.height = 'auto' 

This will ensure that its aspect ratio remains the same.

Bear in mind that browsers tend to suck at resizing images nicely - you'll probably find that your resized image looks horrible.

Answer 2

okay it solved, here is my final code

if($(this).width() > $(this).height()) {   $(this).css('width',MaxPreviewDimension+'px');  $(this).css('height','auto'); } else {  $(this).css('height',MaxPreviewDimension+'px');  $(this).css('width','auto'); } 

Thanks guys