aspect-ratio仅在宽度或高度至少一个为auto时参与推导，若同时声明width和height（如300px/200px）则被完全跳过；失效主因包括双方向锁定、父宽不可测、height相关声明及display不合规。
aspect-ratio 不直接设置尺寸，只参与「auto 尺寸推导」——它只在宽度或高度至少有一个是 auto（或可计算出的值）时才起作用；否则被完全跳过。
为什么写了 aspect-ratio 却没效果？
最常踩的坑是同时声明了 width 和 height，比如：width: 300px; height: 200px;。这时浏览器按固定尺寸渲染，aspect-ratio 根本不进入盒模型计算流程。
-
width: 100%; aspect-ratio: 16 / 9→ 高度自动算出（基于父容器宽度） -
height: 200px; aspect-ratio: 4 / 3→ 宽度自动算出（266.67px） -
width: 100%; height: 100%→aspect-ratio彻底失效（两个方向都锁定） - 即使写成
height: auto，只要父容器高度不可测（如display: inline-block且无width），推导链仍会断裂
aspect-ratio 在 Flex/Grid 中为何常“失灵”？
它不是强制约束，而是布局阶段的「后备推导逻辑」，优先级低于 Flex 主轴伸缩、Grid 轨道定义等显式尺寸控制。
- Flex 子项设了
flex: 1但没设min-width: 0或flex-basis：收缩时宽度基准丢失，比例无法锚定 - Grid 列轨道用
auto或min-content：列宽不确定，行高失去推导依据 - Grid 容器加了
grid-auto-rows: 200px：直接覆盖子项的aspect-ratio推导 - 子项写了
min-width: 0或width: fit-content：可能干扰宽度可测性，需 inspect 实际 computed width
如何验证 aspect-ratio 是否真正生效？
别只看 DevTools 里样式是否“没被划掉”——要查 computed 值中 width 和 height 是否符合预期比例，且其中一个确实是 auto 推导出来的。
- 在 Chrome/Firefox 中，右键元素 → “Computed” → 查看
width和height的实际像素值，再反推比例是否匹配 - 若看到
height: 0px或width: 0px，大概率是宽度不可测（比如父容器是display: flex但未设width，子项又没flex-basis） - Safari 15.3 及更早版本会静默忽略
aspect-ratio，@supports (aspect-ratio: 1/1)也靠不住（老浏览器不识别该规则，整块样式被跳过） - 移动端 WebView（尤其 UC、旧版三星）可能支持
aspect-ratio但不支持object-fit，图片仍会拉伸——得分开验证
真正难调的从来不是 aspect-ratio 本身，而是嵌套层级里那些看不见的 height: 100%、flex: 1、CMS 注入的样式，或者父容器 display 类型导致宽度不可测。它不报错、不警告，只默默让高度变成 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
