页面中图片如何等比显示

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

用到的Javascript代码如下:
<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>
在HTML中像如下这样调用
<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对象;第二个参数:控制图片显示的最大宽度(不想让它超过这个宽度);第三个参数:控制图片显示的最大高度(不想让它超过这个高度)。

标签: 图片, 等比显示

20
Mar 2012
AUTHOR WiFeng
CATEGORY Web
COMMENTS 4 Comments

已有 4 条评论 »

  1. Ander Ander

    HTML中第一行有点画蛇添足的意思吧。
    如是第二行,那此函数的执率效率又欠佳。
    哈哈哈。。。

    1. WiFeng WiFeng

      HTML中第一行是为了加快网页解析速度。如果是第二行,函数执行在哪里可以优化?请指教!!

  2. Sharky Sharky

    Wow, your post makes mine look feelbe. More power to you!

    1. WiFeng WiFeng

      @Sharky O(∩_∩)O哈哈~

添加新评论 »

   点击刷新验证码