Javascript Image Resize

javascript internet-explorer-6 image-manipulation
Komang picture Komang · Oct 4, 2008 · Viewed 209.5k times · Source

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

Dan picture Dan · Oct 4, 2008

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.

Related questions

How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

Here's the problem. I have an image: <img alt="alttext" src="filename.jpg"/> Note no height or width specified. On certain pages I want to only show a thumbnail. I can't alter the html, so I use the …

Read More
Do HTML5 custom data attributes “work” in IE 6?

Custom data attributes: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data When I say “work”, I mean, if I’ve got HTML like this: <div id="geoff" data-geoff="geoff de geoff"> will the following JavaScript: var geoff = …

Read More
jQuery $(document).ready() failing in IE6

I have the following code: // Creates a timer to check for elements popping into the dom timer = setInterval(function () { for (p in pixelTypes) { checkElems(pixelTypes[p]); } }, 10); // Add Document finished callback. $(document).ready(function () { // Document is loaded, so stop trying to …

Read More