1

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

smallgang
232 声望7 粉丝