版權聲明：本文為博主原創文章，未經博主允許不得轉載。作者：沙師弟專欄 https://blog.csdn.net/u014597198/article/details/80403946
HTML如何讓IMG自動適應DIV容器大小
為了讓IMG自適應大小，如下我做了一個橫向自適應的示例：
IMG樣式（橫向拉伸，縱向自動匹配大小）
DIV樣式（元素居中顯示）
IMG樣式（橫向拉伸，縱向自動匹配大小）
width:100%;
height:auto;
1
2
DIV樣式（元素居中顯示）
display:flex;
align-items:center;
justify-content:center;
1
2
3
示例代碼如下：
如下是兩個大小和比例都不同的圖片，應用這個方法可以讓圖片自動填充並居中顯示
<html>
<head>
<title>讓圖片自動適應DIV容器大小</title>
<style>
.ShaShiDi{
width:500px;
height:400px;
display:flex;
align-items:center;
justify-content:center;
/*為了效果明顯，可以將如下邊框打開，看一下效果*/
/* 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
---------------------
作者：沙振宇
來源：CSDN
原文：https://blog.csdn.net/u014597198/article/details/80403946?utm_source=copy
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！