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