溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下HTML怎么讓IMG自動適應DIV容器大小，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。
為了讓IMG自適應大小，如下我做了一個橫向自適應的示例：
IMG樣式（橫向拉伸，縱向自動匹配大小）
DIV樣式（元素居中顯示）
IMG樣式
（橫向拉伸，縱向自動匹配大小）
width:100%; height:auto;
（縱向拉伸，橫向自動匹配大小）
width:auto; height:100%;
DIV樣式（元素居中顯示）
display:flex; align-items:center; justify-content:center;
做法很簡單，只要設置對應圖片的width和htight的具體數值就可以了。看下面的例子：
img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}這樣設置圖片的話，可以使圖片在指定的空間內縮放。4行的意思是：
width:auto;圖片的寬度自己適應(圖片有多寬就顯示多寬)
height:auto;圖片的高度自己適應(圖片有多高就顯示多高)
width:auto;和height:auto;一起使用就代表著顯示圖片的原始尺寸(可以理解為沒有什么作用)
max-width:100%;圖片的寬度不能超過圖片所在的空間的寬度
max-height:100%;圖片的高度不能超過圖片所在的空間的高度
max-width:100%;max-height:100%;一起使用就代表這圖片的寬高尺寸最大不能超過它所在的空間的寬高。
示例代碼
如下是兩個大小和比例都不同的圖片，應用這個方法可以讓圖片自動填充并居中顯示
<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>看完了這篇文章，相信你對“HTML怎么讓IMG自動適應DIV容器大小”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
