前言：在很多网站，不管页面宽度的变化，都需要里面的图片或者视频，宽高比不变。有两种实现方式。
1. aspect-ratio 属性
使用 aspect-ratio 属性可以直接定义元素的宽高比，但是有兼容性问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>document</title>
<style>
.item {
background: #000;
width: 50%;
margin: 0 auto;
aspect-ratio: 4 / 3;
}
</style>
</head>
<body>
<div class="item"></div>
<script></script>
</body>
</html>2. 使用包含块
再套一层元素，使用 padding-top 撑开包含块，再嵌套一层元素填写类型，绝对定位上包含快。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>document</title>
<style>
.item {
background: #000;
width: 50%;
margin: 0 auto;
aspect-ratio: 4 / 3;
}
.inner {
width: 100%;
padding-top: 75%;
height: 0;
position: relative;
}
.container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="item">
<div class="inner">
<div class="container">这是内容</div>
</div>
</div>
<script></script>
</body>
</html>
