HTML标签img--改变图片尺寸

梦里梦外; 2022-08-19 11:28 212阅读 0赞

1、统一大小？

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

![Center][]

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

效果图如下：

![Center 1][]

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

<!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-13050106450911.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.lenght;i++){
    		    	alert("222");
    		        if(imgList[i].width>w || imgList[i].height>h){
    		            imgList[i].width = w;
    		            imgList[i].height = h;
    		        }
    		    }
    		}
    		setImg(400,400);
    	</script>
    	</ul>
      </body>
     </html>

效果如下：

![Center 2][]

感谢论坛大牛：[无爱大叔][Link 1]

[Center]: /images/20220731/dd4e412e12db440e917165d9bb913636.png
[Center 1]: /images/20220731/989be11bfa18418d959aa27f185cbbd1.png
[Center 2]: /images/20220731/1721ce81b29a487ebc66c1823e3720c3.png
[Link 1]: http://my.csdn.net/xhbmj