码迷,mamicode.com
首页 > 编程语言 > 详细

javascript图片等比例缩放代码

时间:2015-08-11 07:00:52      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

javascript图片等比例缩放代码:

图片的尺寸在初始的状态下往往不能够完美的适应网页的布局,这个时候就需要对图片进行缩放处理,当然不能够是无规则的进行缩放,否则可能出现图片变形现象,下面是一段能够对图片进行等比例缩放的实例代码。

代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51texiao.cn/" />
<title>图片等比例缩放代码-蚂蚁部落</title>
<script type="text/javascript">
//参数(图片,允许的宽度,允许的高度) 
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; 
      } 
    } 
  } 
} 
window.onload=function(){
  var theimage=document.getElementById("theimage");
  DrawImage(theimage,80,80)
}
</script>
</head>
<body>
<img src="theimg.jpg" alt="自动缩放后的效果" id="theimage"/>
</body>
</html>

以上代码实现了图片等比例缩放效果,直接套用就可以了。

原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0520/1994.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8543

javascript图片等比例缩放代码

标签:

原文地址:http://www.cnblogs.com/softwhy/p/4719758.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!