css 盒子宽高比例保持不变

最新推荐文章于 2025-11-06 11:52:52 发布

原创最新推荐文章于 2025-11-06 11:52:52 发布 · 363 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

css的奇思妙想专栏收录该内容

1 篇文章

订阅专栏


//结构
<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;
}