Img装载完毕后自动调整大小

在show图片的时候经常需要用到它，大概是大家都比较懒去为每个图调整大小，用Photoshop的批处理是可以省掉很多功夫了，但为求更省事，用脚本啦。

<img id="inu" src="your-image-path.jpg" onload = "resize(this)" />

在页面里插一行就可以了(resize函数体在下面)，如果图像是动态装载的

var img = document.createElement('img');
img.onload = resize;
img.src = "http://farm4.static.flickr.com/3575/3343323074_499a81709c_o.png";

var MAX_IMAGE_SIZE = {
	x: 400,
	y: 400
};

function resize(obj) {
	var img = obj || this;
	var size = MAX_IMAGE_SIZE;
	var rate = img.offsetWidth / img.offsetHeight;
	if (img.offsetWidth > size.x) {
		img.style.width = size.x + "px";
		img.style.height = size.x / rate + "px";
	}
	if (img.offsetHeight > size.y) {
		img.style.width = size.y * rate + "px";
		img.style.height = size.y + "px";
	}
	// 如果有需要居中的话，用CSS也可以实现
	reCenter(img, size);
}

function reCenter(img, size) {
	if (img.offsetHeight < size.y) {
		img.style.marginTop = (size.y - img.offsetHeight)/2 + "px";
	}
	if (img.offsetWidth < size.x) {
		img.style.marginLeft = (size.x - img.offsetWidth)/2 + "px";
	}
}

网上也有不少说onload事件在不同浏览器里的不同现象，Netscape(国内没什么人用了吧) 和 IE不是每次都触发onload事件，只有从网上下载时才执行，从缓存里装载后不执行。

那应该是因为设置onload在设置src之后，设置src后浏览器随即从缓存里装载好了，那时再指定onload为时已晚了，但在Firefox里在前在后都始终如一。最稳是在src之前设置onload属性。