App下載

在html5中讓IMG自動(dòng)適應(yīng)DIV容器大小實(shí)現(xiàn)方法分享！附代碼！

來(lái)源: 知名氣人小說(shuō)寫(xiě)手 2021-08-13 14:36:11 瀏覽數(shù) (4962)
反饋

今天和大家分享有關(guān)于“在html5中讓IMG自動(dòng)適應(yīng)DIV容器大小實(shí)現(xiàn)方法分享！”這方面的相關(guān)內(nèi)容和實(shí)現(xiàn)效果的代碼，希望對(duì)大家的學(xué)習(xí)有所幫助！

為了讓IMG自適應(yīng)大小，如下我做了一個(gè)橫向自適應(yīng)的示例：

  • IMG樣式（橫向拉伸，縱向自動(dòng)匹配大?。?br>  
  • DIV樣式（元素居中顯示）

IMG樣式

（橫向拉伸，縱向自動(dòng)匹配大?。?/p>

 width:100%;
 height:auto;

（縱向拉伸，橫向自動(dòng)匹配大?。?/p>

 width:100%;
 height:auto;

DIV樣式（元素居中顯示）：

 display:flex;
 align-items:center; 
 justify-content:center;

做法很簡(jiǎn)單，只要設(shè)置對(duì)應(yīng)圖片的width和htight的具體數(shù)值就可以了?？聪旅娴睦樱?/p>

img{
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
}

這樣設(shè)置圖片的話(huà)，可以使圖片在指定的空間內(nèi)縮放。4行的意思是：

  • width:auto;圖片的寬度自己適應(yīng)(圖片有多寬就顯示多寬)
  • height:auto;圖片的高度自己適應(yīng)(圖片有多高就顯示多高)
  • width:auto;和height:auto;一起使用就代表著顯示圖片的原始尺寸(可以理解為沒(méi)有什么作用)
  • max-width:100%;圖片的寬度不能超過(guò)圖片所在的空間的寬度
  • max-height:100%;圖片的高度不能超過(guò)圖片所在的空間的高度
  • max-width:100%;max-height:100%;一起使用就代表這圖片的寬高尺寸最大不能超過(guò)它所在的空間的寬高。

示例代碼

如下是兩個(gè)大小和比例都不同的圖片，應(yīng)用這個(gè)方法可以讓圖片自動(dòng)填充并居中顯示：

<html>
<head>
<title>讓圖片自動(dòng)適應(yīng)DIV容器大小</title>
<style>
.ShaShiDi{
width:500px;
height:400px;
display:flex;
align-items:center;
justify-content:center;
   /*為了效果明顯，可以將如下邊框打開(kāi)，看一下效果*/
   /* border:1px solid black; */
}

.ShaShiDi img{
 width:100%;
 height:auto;
}

</style>
</head>
<body>
 <div class="ShaShiDi">
  <img src="./1.png"/>
 </div>
 <div class="ShaShiDi">
  <img src="./2.png"/>
 </div>
</body>
</html>

 那么以上就是對(duì)于：“在html5中讓IMG自動(dòng)適應(yīng)DIV容器大小實(shí)現(xiàn)方法分享！”這方面的全部?jī)?nèi)容分享，更多有關(guān)于html5這方面的內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！


HTML5

0 人點(diǎn)贊