為了讓IMG自適應(yīng)大小，如下我做了一個橫向自適應(yīng)的示例：
IMG樣式
（橫向拉伸，縱向自動匹配大小）
width:100%; height:auto;
（縱向拉伸，橫向自動匹配大小）
width:auto; height:100%;
DIV樣式（元素居中顯示）
display:flex; align-items:center; justify-content:center;
做法很簡單，只要設(shè)置對應(yīng)圖片的width和htight的具體數(shù)值就可以了。看下面的例子：
img{ width:auto; height:auto; max-width:100%; max-height:100%;}這樣設(shè)置圖片的話，可以使圖片在指定的空間內(nèi)縮放。4行的意思是：
示例代碼
如下是兩個大小和比例都不同的圖片，應(yīng)用這個方法可以讓圖片自動填充并居中顯示
<html><head><title>讓圖片自動適應(yīng)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>以上就是HTML如何讓IMG自動適應(yīng)DIV容器大小的實現(xiàn)方法的詳細內(nèi)容，更多關(guān)于HTML IMG自動適應(yīng)DIV的資料請關(guān)注武林網(wǎng)其它相關(guān)文章！
新聞熱點
疑難解答
