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

目录

1.效果展示 

 2.代码内容

 3.代码解析

（1）分析inner类写法

（2）分析container类写法

---

1.效果展示 

 2.代码内容

    .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，自动填充，父盒子