css 保持元素宽高比 随页面宽度变化高度自适应

目录

1.效果展示?

?2.代码内容

?3.代码解析

（1）分析inner类写法

（2）分析container类写法

1.效果展示?

?2.代码内容

<div class="item">
    <div class="inner">
        <di class="container"></di>
    </div>
</div>

    .item{
        background:red;
        width:50%;
        margin:0 auto;
    }
    .inner{
        width:100%;
        height:0;
        padding-bottom: 60%;
        position: relative;
    }
    .container{
        position: absolute;
        inset:0;
        background: grey;
    }

?3.代码解析

（1）分析inner类写法

?.inner{
? ? ? ? width:100%;
? ? ? ? height:0;
? ? ? ? padding-bottom: 60%;
? ? ? ? position: relative;
? ? }

将height设置为0，只设置底部内边距将类inner盒子的高度撑开

padding具有根据包含块宽度变化自动适应尺寸的特性，这里的inner包含块为item

即item包含块设置的宽度为百分之50

则类inner盒子，根据item包含块的50%，自适应宽度

（2）分析container类写法

? ? .container{
? ? ? ? position: absolute;
? ? ? ? inset:0;
? ? ? ? background: grey;
? ? }

绝对定位元素，配合inset设置0，自动填充，父盒子