JavaScript等比例缩放图片

js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,以稳定页面布局,本代码段就是完成了此功能,而且代码非常简洁,效果很好。

<html>

<head>

<title>等比例缩放图片</title>

<script>

function DrawImage(ImgD,iwidth,iheight){    

    //参数(图片,允许的宽度,允许的高度)    

    var image=new Image();    

    image.src=ImgD.src;    

    if(image.width>0 && image.height>0){    

      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;    

          }    

      }else{    

          if(image.height>iheight){      

              ImgD.height=iheight;    

              ImgD.width=(image.width*iheight)/image.height;            

          }else{    

              ImgD.width=image.width;      

              ImgD.height=image.height;    

          }    

      }    

    }    

}   

</script>

</head>

<body>

<img src="http://www.zg700.com  /9/9/5/1_qiaqia609.jpg" alt="自动缩放后的效果" width="100" height="100" />

</body>

</html>



你可能感兴趣的:(function,图片,网页,变形,而且)