aspect-ratio 属性可用，但兼容性有限：chrome 88+、firefox 89+、safari 15.4+ 支持，旧版 chrome（如 87 及更早）不支持。
aspect-ratio 属性是否可用？先看浏览器支持
不是所有浏览器都认 aspect-ratio，尤其老版本 Chrome（
实操建议：
- 用 caniuse.com 查目标环境支持率
- 在 CSS 中加降级方案：先写 padding-top 百分比技巧，再覆盖 aspect-ratio
- 检查构建工具是否自动加前缀（它不需要前缀，但有些 PostCSS 插件会误删）
Flex 容器里 aspect-ratio 为什么有时不生效
常见错误是把 aspect-ratio 加在 Flex 子项上，但父容器设了 flex: 1 或 min-width: 0，导致子项被强制压缩，宽高比被忽略。Flex 的默认行为（min-width: auto）会阻止收缩，但一旦显式设了 min-width: 0，aspect-ratio 就可能被绕过。
实操建议：
- 确保子元素没被 flex-shrink: 1 和窄父容器共同挤压
- 给子元素加 min-width: 0 *仅当需要内容换行时*；否则保留默认 min-width: auto
- 若父容器是 display: flex; flex-direction: column，子项高度受父容器限制，aspect-ratio 可能只按宽度推算高度，结果不如预期
替代方案：padding-top 百分比 + position 实现兼容长宽比
这是目前最稳的降级写法，原理是利用 padding-top 值基于父容器宽度计算的特性。但它要求元素脱离文档流（position: absolute），且父容器需设 position: relative，不然内容会塌陷。
实操建议：
- 父容器必须设 position: relative
- 子容器设 position: absolute; top: 0; left: 0; width: 100%; height: 0; padding-top: 56.25%（16:9）
- 内容层再包一层 position: absolute; top: 0; left: 0; width: 100%; height: 100%
- 注意：百分比值 = 高 ÷ 宽 × 100%，比如 4:3 是 75%，1:1 是 100%
.aspect-box {
position: relative;
width: 100%;
}
.aspect-box::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 */
}
.aspect-box > .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
aspect-ratio 和 object-fit / background-size 搭配容易出错
很多人以为设了 aspect-ratio: 16/9 就不用管图片怎么铺了，其实不然。如果子元素是 <img>，它的固有尺寸和 object-fit 会和容器的 aspect-ratio 产生冲突；背景图同理，background-size: cover 优先级高于容器比例约束。
实操建议：
- 图片用 width: 100%; height: 100%; object-fit: cover，并确保父容器有明确 aspect-ratio
- 背景图场景，别依赖容器比例“自动裁剪”，而是用 background-size: cover + background-position 精控
- 避免同时对同一元素设 aspect-ratio 和 height 固定值，后者会直接覆盖前者
真正卡住人的往往不是语法写错，而是 flex 的收缩行为、父容器尺寸来源、以及降级方案里那个 position: relative 忘了加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
