.item{
/* 不管高度是多少 他的宽高比一致 */
width: 50%;
aspect-ratio: 4 / 3; //设置宽高比 但是兼容性有问题 要到2021年以后发布的浏览器版本才能使用
/* height是自身宽度的75% */
margin: 0 auto;
background-color: rgb(255, 0, 0);
}
考虑兼容性就要套一层div设置padding-top再套一层div里面写内容
.item{
/* 不管高度是多少 他的宽高比一致 */
width: 50%;
/* height: 100px; */
/* height是自身宽度的75% */
margin: 0 auto;
background-color: rgb(255, 0, 0);
}
.inner{
/* 考虑兼容性 */
width: 100%;
/* height: 父元素的75%; */
padding-top: 75%;
}
.dswgydbhw{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: black;
}
</style>
</head>
<body>
<div class="item">
<div class="inner">
<div class="dswgydbhw"></div>
</div>
</div>
</body>
