明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

html中對于img標簽以及改變圖片尺寸的詳細說明（圖）

發(fā)表時間：2024-05-11 來源：明輝站整理相關軟件相關文章人氣：

[摘要]1、統(tǒng)一大�。课业木W(wǎng)頁上面有許多的圖片，有的大，有的小，我想如果圖片大的實現(xiàn)縮放，所有的都是一般大。來看看沒有是什么效果。大家看的出來，非常的難看的，于是我想讓有沒有一種方法是把那個大的變成小的呢？<li><img src=http://pic2.ooopic.com/01/03...
1、統(tǒng)一大��？

我的網(wǎng)頁上面有許多的圖片，有的大，有的小，我想如果圖片大的實現(xiàn)縮放，所有的都是一般大。來看看沒有是什么效果。

html中關于img標簽以及改變圖片尺寸的詳解（圖）

大家看的出來，非常的難看的，于是我想讓有沒有一種方法是把那個大的變成小的呢？

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

效果圖如下：

html中關于img標簽以及改變圖片尺寸的詳解（圖）

但是如果圖片太小了呢？就會被放大，好難看�。。∮袥]有什么辦法讓大的變小，小的不被放大的方法呢？

<!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.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>

效果如下：

html中關于img標簽以及改變圖片尺寸的詳解（圖）

以上就是html中關于img標簽以及改變圖片尺寸的詳解（圖）的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！


網(wǎng)站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。