在页面绘制时，经常遇到元素的宽度或者高度需要自适应，但又希望保持元素的宽高比。
如何实现这样的效果，而不需要使用额外的HTML结构或 js 代码。
❤ 这里分享两个方法:
方法一：使用 aspect-ratio 属性
.box {
width: 100%;
aspect-ratio: 16 / 9;
}
width: 100%;：设置元素的宽度为其父元素的100%。aspect-ratio: 16 / 9;：设置元素的宽高比为16:9。由于已经指定了宽度，浏览器会根据这个比例自动计算高度。
这种方法简洁明了，但需要注意的是，aspect-ratio 属性在较旧的浏览器中可能不受支持。因此，在生产环境中使用时，您可能需要考虑浏览器兼容性。
方法二：使用 padding-bottom 技巧
.box {
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
width: 50%;：同样设置元素的宽度为其父元素的100%。height: 0;：将元素的高度设置为0。padding-bottom: 56.25%;：通过设置底部内边距为宽度的56.25%（即9/16），可以间接地设置元素的高度，从而实现16:9的宽高比。由于元素的高度被设置为0，其内容（如果有的话）将不会占据任何空间，但padding-bottom会创建一个可视区域，其高度与宽度成16:9的比例。
这种方法是一种传统的CSS技巧，兼容性好，但在某些情况下可能需要额外的HTML结构来包裹内容，以确保内容正确显示。
总结
当你在考虑怎么让页面上的某个元素保持固定的宽高比时，你可以根据实际情况和浏览器兼容性来挑选最合适的方法。
如果你希望你的网页能在各种浏览器上都能看起来好好的，特别是那些老旧的浏览器，那么用padding-bottom这招会比较保险。这个方法很靠谱，能在很多不同的浏览器上稳定运行。
但要是你的用户大多都在用新版的浏览器，而且你也想让代码看起来更简洁、更好懂，那aspect-ratio这个属性就挺适合的。它直接就能设定好元素的宽高比，代码写起来也简洁明了。
所以，具体选哪个方法，还得看你的需求和用户的浏览器使用情况来定。
demo分享
<body>
<div class="resize-container">
<div class="box1">
宽高比16/9<br/>
aspect-ratio
</div>
<div class="box2">
宽高比16/9<br/>
padding-bottom
</div>
</div>
</body>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.resize-container {
resize: both; /* 允许用户通过拖拽调整容器大小 */
overflow: auto; /* 确保内容不被裁剪 */
width: 160px; /* 初始宽度 */
height: 220px; /* 初始高度 */
border: 2px solid #ccc; /* 添加边框以便观察 */
}
.box1, .box2 {
color: #fff;
}
.box1 {
width: 100%;
aspect-ratio: 16 / 9 ;
background-color: #3498db;
}
.box2 {
width: 100%;
height: 0;
background-color: #e25555;
/* 16:9 的宽高比，即 9/16 = 0.5625，转换为百分比即 56.25% */
padding-bottom: 56.25%;
}
</style>
