js写了个图片自动伸缩不变形的效果，大家可以运行看下效果。 显示图片等比缩小图片不变形
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片自动伸缩实例</title>
<script>
function autoResizepic(Imgc)
{
//Imgc是包含图片DIV的ID
var picTarget=document.getElementById(Imgc).getElementsByTagName('img');
//alert(picTarget.length);
var rule_w=635;//最宽图片宽度
if(picTarget.length>0)
{
//alert(picTarget.length);
for(var i =0;i<picTarget.length;i++)
{
if(picTarget[i].width>rule_w)
{picTarget[i].height=picTarget[i].height*rule_w/picTarget[i].width;picTarget[i].width=rule_w;}
if(parseInt(picTarget[i].style.width)>rule_w)
{picTarget[i].style.height=parseInt(picTarget[i].style.height)*rule_w/parseInt(picTarget[i].style.width);picTarget[i].style.width=rule_w+"px";}
}
}
}
</script>
</head>
<body>
<div id="imgContent" style="width:635px;">
<img src="http://img77.ph.126.net/h3sl-720eOD3mPOemD5pQg==/3021633874989209077.jpg" />
<img src="http://xpcolor.com/wallpaper/UploadPic/2007-12/2007122345112476.jpg" />
</div>
<script>
autoResizepic("imgContent");
</script>
</body>
</html>
完(好像运行里面看不到效果。你可以复制到你本地运行下。)
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)