页面中图片如何等比显示

页面中很多时候都需要图片显示其原样，但是有时候图片实际大小与页面中显示区域的大小又有差距，这个怎么办？只有图片等比显示（只是等比缩小，不会等比放大，因为放大会失真，我想哪个产品经理都不想要这样的结果）
虽然之前项目中多次用到，但是没有保存起来，这里就显摆显摆，以后直接复制就可以哦。

<script type="text/javascript">
function imgsizeauto(obj, width, height) {
	var img = new Image();
	img.src = obj.src;
	
	var realwidth = img.width;
	var realheight = img.height;
	var w_diff = realwidth - width;
	var h_diff = realheight - height;
	if(w_diff > 0 || h_diff > 0) {
		if(w_diff > h_diff) {
			obj.style.width = width + "px";
			obj.style.height = "auto";
		} else {
			obj.style.height = height + "px";
			obj.style.width = "auto";
		}
	} else {
		obj.style.width = "auto";
		obj.style.height = "auto";
	}	
}
</script>

<img src="C:/Pictures/51syj3j.jpg" width="100" height="200" onload="imgsizeauto(this, 100, 200)" />
<img src="C:/Pictures/Desert.jpg" onload="imgsizeauto(this, 200, 100)" />

需要注意的是：
1. 一定要把这两个示例代码在页面中载入的次序调整对，如果按照上面的写法，那就必须先载入Js 代码，然后才可以写这个<img>，否则会提示脚本错误哦。
2. 为了完全控制图片不乱跑，可以在样式里初始化的时候控制这个<img> 的宽高，或者是标签里加上 width ，height 属性值，虽然在加载的时候图片可能是模糊的，但是那个时间不会超过0.5秒，所以不必多虑。
3. 上面函数的第一个参数值：当前img对象；第二个参数：控制图片显示的最大宽度（不想让它超过这个宽度）；第三个参数：控制图片显示的最大高度（不想让它超过这个高度）。

标签: 图片, 等比显示