padding-bottom實現圖片自適應

smallgang發表於2018-08-08
padding

1.需求場景

如我們在實現移動端banner輪播的時候，需要輪播圖充滿我們的輪播區域，通常我們的做法是banner設定固定寬高,然後超出隱藏，img設定max-width:100%;這樣雖然能實現充滿輪播區域，可是我們會發現，雖然寬度自適應了，高度並沒有自適應，有時候我們會發現縱向上圖片底部不見了，因為如果圖片太高，當圖片寬度100% 自適應的時候，高度也會按照寬度自適應的比例進行自適應(縮小或放大)，此時高度超出banner區域被隱藏了，視覺上會造成圖片丟失的感覺。那我們該怎麼解決呢？見程式碼

<div class="banner">
    <div class="cell">
        <img src="img/img.jpg">
    </div>
</div>

.banner{
    width: 700px;
    height: 700px;
    border: 1px solid #000;
    margin: 0 auto;
}
.cell{
    width:100%;
    height: 0;
    padding-bottom: 31.25%;
    overflow: hidden;
    background: red;
}
img{width: 100%;}

為什麼padding-bottom 取值31.25% 呢，因為圖片的高為200px,寬為640px。 200/640 既為31.25%。 cell的padding-bottom撐起了cell的高度，這個百分度取值是相對於cell寬度的百分比，而不是父容器banner高度的百分比。此時我們就解決了圖片的自適應問題。
其實我們那還有另外一種寫法實現，如下：

.banner{
    width: 700px;
    height: 700px;
    border: 1px solid #000;
    margin: 0 auto;
}
.cell{
    width:100%;
    height:31.25vw;
    overflow: hidden;
    background: red;
}
img{width: 100%;}

相關文章