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%;}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。