限制页面所有图片的宽度

你这样加已经晚了！
页面已经onload了，图片肯定也load完毕了。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script>
function setMaxHeight(imgObj,maxHeight){
if(imgObj.offsetHeight>maxHeight) {
imgObj.height=maxHeight;
imgObj.removeAttribute('width');
}
}
</script>
</head>
<body>
设定最大宽度和最大高度，同时保证图片比例。
<hr>
<IMG id="big_img2"
src="20060925132517e9cb7.gif" width="500" onload="setMaxHeight(this,300);">
</body>
</html>
不是，我的主要困惑是如何遍历所有image对象加上onload="setMaxHeight(this,300);"这一句，因为这是个aspx页面，后台代码是封装了的，也就是说<IMG id="big_img2"
src="20060925132517e9cb7.gif" width="500" onload="setMaxHeight(this,300);">这一断对于我是不可见的，没法直接加。
在页面onload之前加上以上属性/事件（不要在页面onload后）。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script>
function setMaxHeight(imgObj,maxHeight){
if(imgObj.offsetHeight>maxHeight) {
imgObj.height=maxHeight;
imgObj.removeAttribute('width');
}
}
</script>
</head>
<body>
设定最大宽度和最大高度，同时保证图片比例。
<hr>
<IMG id="big_img2"
src="http://zi.csdn.net/huabiao120-60a.gif" >
</body>
</html><script>
big_img2.removeAttribute('width');
big_img2.removeAttribute('height');
big_img2.width=500;
big_img2.onload= new Function("setMaxHeight(this,200);");
</script>
另：所谓“后台代码是封装了的”,应该早点给后台代码的人提意见，因为用js给后台代码揩PP，这似乎有点过份。
<script>
big_img2.removeAttribute('width');
big_img2.removeAttribute('height');
big_img2.width=500;
big_img2.onload= new Function("setMaxHeight(this,200);");
</script>
这一段就直接能执行吗？不需要调用？
另：所谓“后台代码是封装了的”,应该早点给后台代码的人提意见，因为用js给后台代码揩PP，这似乎有点过份。
不是，这个是一个半开源的东东，在上面做修改，给人家提意见可提不着啊。
好了，谢谢JK_10000(JK)
<script language="javascript">
//图片按比例缩放
var flag=false;
function DrawImage(ImgD)
{
    var image=new Image();
    var iwidth = 524; //定义允许图片宽度
    var iheight = 100000; //定义允许图片高度
    image.src=ImgD.src;
    if(image.width>0 && image.height>0)
    {
        flag=true;
        if(image.width/image.height>= iwidth/iheight)
        {
            if(image.width>iwidth)
            {
                ImgD.width=iwidth;
                ImgD.height=(image.height*iwidth)/image.width;
            }
            else
            {
                ImgD.width=image.width;
                ImgD.height=image.height;
            }
            ImgD.alt=image.width+"×"+image.height;
       }
       else
       {
            if(image.height>iheight)
            {
                ImgD.height=iheight;
                ImgD.width=(image.width*iheight)/image.height;
            }
            else
            {
                ImgD.width=image.width;
                ImgD.height=image.height;
            }
            ImgD.alt=image.width+"×"+image.height;
       }
    }
}
//调用：<img src="图片" onload="javascript:DrawImage(this)">
var imgCcount = document.images.length;
   for (i=0;i<imgCcount;i++)
    {
       var thisimg = document.images[i];
       if(thisimg.src != "http://www.dafangtour.com/Library/img-l/butten01.gif" )
       {
         var imagea=new Image();
         imagea.src=thisimg.src;
         if (imagea.width > 524)
         {
             thisimg.removeAttribute('width');
             thisimg.removeAttribute('height');
             thisimg.removeAttribute('style');
             DrawImage(thisimg);
         }
      }
    }
</script>这段代码因为我们有些需求特殊，所以看起来有些罗唆。总结关键是：
1.页面执行循序
执行代码要放在页末尾，需要等所有images对象都转载完再执行。
2.我加了一个
thisimg.removeAttribute('style');
如果是在style里定义了图片的长宽，则我们定义image.width和height都没用，要先将style属性去掉。