妈妈再也不用担心我的“图片等比例缩放”啦

编辑：admin 时间：2015-08-13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片等比例缩放代码-www.rongsoft.cn</title>
<script type="text/javascript">
function DrawImage(ImgD, FitWidth, FitHeight) {
    var image = new Image();
    image.src = ImgD.src;
    if (image.width > 0 && image.height > 0) 
    {
        if (image.width / image.height >= FitWidth / FitHeight) 
        {
            if (image.width > FitWidth) {
                ImgD.width = FitWidth;
                ImgD.height = (image.height * FitWidth) / image.width;
            }
            else {
            ImgD.width = image.width;
            ImgD.height = image.height;
        }
    }
    else {
        if (image.height > FitHeight) {
            ImgD.height = FitHeight;
            ImgD.width = (image.width * FitHeight) / image.height;
        }
        else {
            ImgD.width = image.width;
            ImgD.height = image.height;
        }
    }
}
}
</script>  
</head>

<body>

<div style="width:620px;margin:0 auto;">
	<p>原图尺寸:</p>
	<p><img src="http://www.198zone.com/images/meinv.jpg" width="400px" /></p>
	
	<p>1、调用方式:</p>
	<p><img src="http://www.198zone.com/images/meinv.jpg" alt="自动缩放后的效果" onload="javascript:DrawImage(this,200,200);" /></p>
	<p><img src="http://www.198zone.com/images/meinv.jpg" alt="自动缩放后的效果" onload="javascript:DrawImage(this,200,200);" />  </p>
	
	<p>2、调用方式:如果图片较大，建议在图片标签里面同时设置期望的图片大小，这样不会导致页面在加载中撑开，该大小不会影响最终缩放效果。
	可以修改上面的代码为:</p>
	<p> <img src="http://www.198zone.com/images/meinv.jpg" alt="自动缩放后的效果" width="200" height="200" onload="javascript:DrawImage(this,200,200);" /></p>
	<p><img src="http://www.198zone.com/images/meinv.jpg" alt="自动缩放后的效果" width="200" height="200" onload="javascript:DrawImage(this,200,200);" />  </p>
	<p> </p>
</div>
 
<!--荣华多用户电商系统，为您实时更新最新的原创技术www.rongsoft.cn-->
 <div style="width:960px;margin:10px auto; clear:both; text-align:center;  ">
<script src="/statics/js/ad/96090.js" type="text/javascript"></script>
</div>
<div style="width:960px;margin:20px auto 100px auto; clear:both; text-align:center; font-size:12px; line-height:25px;    ">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<a href="http://www.rongsoft.cn"  style="color:#333"><strong>多用户电商系统</strong></a> </strong>
</div>
</body>
</html>

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：为你的多用户商城系统添一把火

下一篇：别再抱怨了，是你的执行力不够

回复列表

妈妈再也不用担心我的“图片等比例缩放”啦

400-692-8081