padding-bottom實現圖片自適應

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%;}