方式一
.cont{
width: 300px;
background-color: #00a0e9;
}
.cont:after{
display: block;
width: 100%;
padding-top: 75%;
content: '';
}
<div class="cont">
</div>
padding-top 和 padding-bottom百分比是基于父级的,可用添加伪类的方式,在伪类上设置padding-top、padding-bottom来实现,这种方式无论width怎么设置,都可实现固定长宽比。
方式二
.cont1{
width: 40vw;
height: 30vw;
background-color: #ff5555;
}
<div class="cont1">
</div>
这种方式宽度和高度都是随屏幕宽度等比例变化的。
网友评论