使用 aspect-ratio 属性可让元素在容器变化时保持固定宽高比，如设置 16:9 的比例；现代浏览器中直接使用 aspect-ratio 即可实现响应式自适应，例如 .container { width: 100%; aspect-ratio: 16 / 9; }；对于不支持的旧浏览器，可用 padding-bottom 技巧模拟，通过 height: 0 和 padding-bottom: 56.25% 实现相同效果；结合媒体查询可在不同屏幕下切换比例，如移动端设为 1:1；推荐优先使用 aspect-ratio 并辅以传统方法确保兼容性。
要让一个元素在容器尺寸变化时依然保持固定的宽高比，可以使用 CSS 的 aspect-ratio 属性。这个属性能直接定义元素的宽高比例，浏览器会根据宽度自动计算高度，从而实现响应式自适应。
使用 aspect-ratio 保持宽高比
aspect-ratio 是现代浏览器支持的一个 CSS 属性，语法简单：
.container {
width: 100%;
aspect-ratio: 16 / 9; /* 宽高比为 16:9 */
background: #eee;
}
上面的代码会让元素始终维持 16:9 的比例，不管父容器如何缩放，高度都会按比例自动调整。
常见用途包括：
立即学习“前端免费学习笔记（深入）”；
- 响应式视频容器（如 iframe 或 video）
- 图片画廊中统一尺寸的占位框
- 卡片组件保持一致视觉比例
兼容性处理与传统方法（Padding 百分比）
如果需要兼容不支持 aspect-ratio 的旧浏览器（如 Safari 早期版本），可以用传统的 padding-bottom 技巧：
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 9 / 16 = 0.5625，对应 16:9 */
}
<p>.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}</p>这种方法利用了 padding 百分比基于父元素宽度计算的特性，通过设置 height: 0 和 padding-bottom 来“撑”出一个按比例缩放的高度。
结合媒体查询优化不同屏幕
你也可以在不同屏幕下切换宽高比：
.responsive-box {
width: 100%;
aspect-ratio: 4 / 3;
}
<p>@media (max-width: 768px) {
.responsive-box {
aspect-ratio: 1 / 1; /<em> 移动端变为正方形 </em>/
}
}</p>基本上就这些。用 aspect-ratio 最简洁高效，搭配传统方法可确保兼容性，轻松实现响应式宽高比控制。
