html中关于img标签以及改变图片尺寸的详解（图）

来源：高士教育

1、统一大小？

我的网页上面有许多的图片，有的大，有的小，我想如果图片大的实现缩放，所有的都是一般大。来看看没有是什么效果。

大家看的出来，非常的难看的，于是我想让有没有一种方法是把那个大的变成小的呢？

<li><img src='http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg' width=400px height=400px /></li>

效果图如下：

但是如果图片太小了呢？就会被放大，好难看！！！有没有什么办法让大的变小，小的不被放大的方法呢？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <base href="<%=basePath%>">
 
 <title>食物详情</title>

 </head>
 <body>
 	
 	<ul>
	<li><img name="pic" src='http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg' /></li>
	<li><img name="pic" src='http://baike.soso.com/p/20090711/20090711101754-314944703.jpg' /></li>
	<li><img name="pic" src='http://img2.3lian.com/img2007/19/33/005.jpg' /></li>
	<li><img name="pic" src='http://img.taopic.com/uploads/allimg/130501/240451-130501050911.jpg' /></li>
	<script type="text/javascript">
	function setImg(w, h){
	alert("111");
	 //var imgList = document.getElementsByTagName('img');
	 var imgList = document.getElementsByName("pic");
	 for(var i=0;i<imgList.length;i++){
	 	alert("222");
	 if(imgList[i].width>w || imgList[i].height>h){
	 imgList[i].width = w;
	 imgList[i].heigth = h;
	 }
	 }
	}
	setImg(400,400);
	</script>
	</ul>
 </body>
 </html>

效果如下：