javascript等比例缩放图片示例

发布时间:2020-09-14编辑:脚本学堂
本文介绍了javascript等比例缩放图片的方法,js脚本实现图片的等比例缩放,有需要的朋友参考学习下。

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

例子,javascript等比例缩放图片的代码。
 

复制代码 代码示例:
<html>
<head>
<title>等比例缩放图片--www.jb200.com</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="/images/logo.gif" alt="自动缩放后的效果" width="220" height="80" onload="javascript:drawimage(this,100,100)" />
</body>
</html>