Resize images dynamically in the browser.

Use "visibility:hidden" instead of "display:none" since IE can't determine an image size when hidden.
JavaScript

Set maximum bounds for width and height.

function imgSetMaxWidthHeight(imgid, maxwidth, maxheight) {
	var img = document.getElementById(imgid);
	if (img) {
		var srcwidth = img.width;
		var srcheight =img.height;
		if (srcwidth>maxwidth) {
			newwidth = maxwidth;
			newheight = srcheight / srcwidth * maxwidth;
			img.width=newwidth;
			img.height=newheight;
		} else if (srcwidth>maxheight) {
			newwidth = srcwidth / srcheight * maxheight;
			newheight = maxheight;
			img.width=newwidth;
			img.height=newheight;
		}
		img.style.visibility='';
	}
}

Just set maximum bounds for width, let height remain dynamic.

function imgSetWidth(imgid, newwidth) {
	var img = document.getElementById(imgid);
	var srcwidth = img.width;
	var srcheight =img.height;
	if (srcwidth>newwidth) {
		var newheight = srcheight / srcwidth * newwidth;
		img.width=newwidth;
		img.height=newheight;
	}
	img.style.display='';
}

Posted by fbrefere001 on Wednesday February 2, 2011