web圖片100%寬度自適應,高度不塌陷

通常在web端圖片100%自適應,在頁面加載的時候存在高度塌陷的問題

解決這個問題其實很簡單,用padding-top設置百分比值來實現自適應,公式以下

padding-top = (Image Height / Image Width) * 100%

如:圖片寬400px,高200px;套用上面公式計算出padding-top:值是50%;

HTML代碼

<div class="cover">
    <img src="images/test.jpg" alt=""/>
</div>

.cover{position: relative; padding-top:50%; height: 0; overflow: hidden;}
.cover img{position: absolute; top: 0; width: 100%;}