自动控制网页内的图片尺寸 等比例缩放图片,避免撑破布局

作者: 坎肩儿 分类: JS代码 发布时间: 2011-07-02 14:44

代码如下:

<script type=”text/javascript” >
//缩放图片到合适大小
function ResizeImages()
{
   var myimg,oldwidth,oldheight;
   var maxwidth=550;
   var maxheight=550
   var imgs = document.getElementById(‘Main_Cont’).getElementsByTagName(‘img’);   //如果你定义的id不是article,请修改此处

   for(i=0;i<imgs.length;i++){
     myimg = imgs[i];

     if(myimg.width > myimg.height)
     {
         if(myimg.width > maxwidth)
         {
            oldwidth = myimg.width;
            myimg.height = myimg.height * (maxwidth/oldwidth);
            myimg.width = maxwidth;
         }
     }else{
         if(myimg.height > maxheight)
         {
            oldheight = myimg.height;
            myimg.width = myimg.width * (maxheight/oldheight);
            myimg.height = maxheight;
         }
     }
   }
}
//缩放图片到合适大小
ResizeImages();
</script>

应用也很简单,定义DIV的ID为:Main_Cont,图片在这个DIV里面显示,就可以控制了。