I have an image element which is dynamically changed, and if necessary dynamically re-sized to fit its container.
My current process is:
reset image:
// make sure the 'load' event is re-triggered
img.src = "";
// reset dimensions
img.style.width = "auto";
img.style.height = "auto";
set its new source and wait for it to load
img.src = newImageSource;
in the images onload
handler, the size is tested and if necessary, altered:
img.style.width = newWidth + "px";
this is repeated as often as the image is changed (infinite).
This works fine for all browsers tested (ie7,8,9,10, FF, chrome) however ie6 setting width/height to "auto" seems to resize the element to around 25 x 25 px regardless of the actual image's dimensions.
So; is there a way to reset the images dimensions to the equivalent of "auto" so that the dimensions of the image subsequently loaded determines the elements dimensions for ie6?
I believe you can write
img.style.width = "";
to set the width to its default value of auto
. Apparently img.style.width = "auto";
doesn't work the same way.