js图片自动伸缩不变形-幸凡学习网

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>

完(好像运行里面看不到效果。你可以复制到你本地运行下。)

如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=375【js图片自动伸缩不变形】幸凡学习网