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