aspect-ratio 在现代浏览器中可直接使用，但需注意兼容性：chrome 88+、firefox 89+、safari 15.4+ 和 edge 90+ 原生支持；safari 15.0–15.3 仅伪支持，@supports 检测为 true 却无效；降级需手动写死而非依赖特性检测。
aspect-ratio 在现代浏览器中是否能直接用
能，但得看目标环境。Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持 aspect-ratio，且无需前缀。但 Safari 15.0–15.3 仅支持 aspect-ratio: auto（无效），15.4 才真正可用；Edge 90+ 同 Chrome。如果你的项目需兼容 Safari aspect-ratio 会静默失效——它不会报错，也不会 fallback，容器就按默认宽高渲染。
怎么写 aspect-ratio 才不踩坑
aspect-ratio 接收一个比值（如 16 / 9）或关键字 auto，但注意：它只对**块级元素或弹性/网格子项**生效；对 inline 元素、table-cell 或未设 display 的元素无效。常见错误是套在 img 或 video 上却没加 display: block，结果比例没反应。
- 推荐写法：
aspect-ratio: 16 / 9（空格和斜杠必须，不能写成16:9或16/9） - 若内容高度不确定，可配合
height: 0+padding-bottom传统方案做降级（见下条） - 它不替代
width/height，而是约束「宽高关系」；设了width: 100%后，高度会自动计算，反之亦然
如何安全降级到 padding-bottom 方案
当需要兼容老浏览器时，不能只靠 @supports 包裹——因为 Safari 15.0–15.3 会通过检测却实际不工作。更稳妥的方式是：用 aspect-ratio 为主，再叠加传统技巧，并确保结构层不依赖 JS 判断。
示例（响应式正方形容器）：
.box {
width: 100%;
aspect-ratio: 1 / 1;
}
.box::before {
content: "";
display: block;
padding-top: 100%; /* 传统占位 */
}
.box > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
这里 aspect-ratio 优先生效，老浏览器忽略它，退回到伪元素撑开高度；position: absolute 子元素确保内容填满。
aspect-ratio 和 object-fit 配合视频/图片时的注意事项
单独设 aspect-ratio 只控制容器，不控制内部媒体拉伸。比如 <img src="..." style="max-width:90%">，图片仍可能被裁剪或留白。必须显式加 object-fit：
-
object-fit: cover→ 等比缩放并裁剪填满（常用） -
object-fit: contain→ 等比缩放并完整显示（留白） - 别漏掉
height: 100%或display: block，否则object-fit不触发
最简可靠组合：aspect-ratio: 16/9; width: 100%; height: 100%; object-fit: cover;
实际项目里最容易被忽略的是 Safari 15.0–15.3 这个“半支持”区间——它让 @supports (aspect-ratio: 1) 返回 true，但行为等同于未声明。真要全链路稳，得把降级逻辑写死，而不是依赖特性检测结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
