css实现根据元素自适应宽度设定高度
需求描述:wap页面展现一张banner图片,要求其宽度为页面的宽度(屏幕宽度),高度为宽度的3/5。css实现:js实现方式很简单,就不做介绍了;这里我们说下css的实现方式。因padding是根据viewport的width来计算的,于是想到通过设置padding-bottom跟width达成某种比例关系。经尝试有效,代码如下:// banner-box为图片容器,设置其height为0,pa
·
需求描述:
wap页面展现一张banner图片,要求其宽度为页面的宽度(屏幕宽度),高度为宽度的3/5。
css实现:
js实现方式很简单,就不做介绍了;这里我们说下css的实现方式。
因padding是根据viewport的width来计算的,于是想到通过设置padding-bottom跟width达成某种比例关系。经尝试有效,代码如下:
// banner-box为图片容器,设置其height为0,padding-bottom为60%;便可到达宽/高比为5/3。
.banner-box{
width:100%;
height:0;
padding-bottom:60%
}
更多推荐
已为社区贡献5条内容
所有评论(0)