//结构
<div class="box">
<div class="box-height">
<div class="box-content">
</div>
</div>
</div>
//样式
.box{
width: 100%;
background-color:red;
}
.box-height{
width: 100%;
//这个50%指的是宽度的50%,padding具有根据包含块宽度变化自动适应尺寸的特性
//利用这个padding的特性做高度的比例变化
padding-bottom: 50%;
position: relative;
}
.box-content{
position: absolute;
inset: 0;
}
css 盒子宽高比例保持不变
最新推荐文章于 2024-06-25 00:02:13 发布