aspect-ratio仅在宽度可测且高度未锁定时生效，否则被浏览器跳过；它不是样式覆盖，而是盒模型推导逻辑，需明确一个方向尺寸才能计算另一方向。
aspect-ratio 能保持宽高比，但只在“宽度可测、高度未锁定”时才真正起效；写上就生效是错觉，90% 的失效问题都出在这两个条件没满足。
为什么写了 aspect-ratio 却没高度？
它不是样式覆盖，而是参与盒模型计算的推导逻辑：浏览器需要一个已知尺寸（通常是宽度），再按比例算出另一个方向。如果宽度不可测或高度已被显式声明，它直接被跳过。
-
width为auto且父容器没有明确宽度（比如display: inline-block无width）→ 宽度为 0，高度也为 0 - 写了
height: auto、height: 100%或height: 200px→ 浏览器认为高度已确定，忽略aspect-ratio - DevTools 里该属性被划掉？可能是 Safari 15.3 及更早版本不支持，或存在冲突声明（如同时设了
flex-basis和aspect-ratio）
aspect-ratio 在 Flex/Grid 中为啥不生效？
Flex 和 Grid 的轨道定义优先级高于子项的 aspect-ratio，一旦父容器用硬性尺寸约束了子项，比例就失去作用空间。
- Flex 容器中，子项设了
flex: 0 0 auto或align-items: stretch→ 子项被强行拉高，覆盖比例计算 - Grid 中写了
grid-template-columns: 1fr 200px，子项再设aspect-ratio: 1 / 1→ 列宽已由1fr或200px固定，浏览器不再反推高度 - 解决办法：子项加
align-self: start（Flex）或确保所在轨道宽度可推导（Grid），避免显式height和flex-basis
给 <img> 直接设 aspect-ratio 为什么无效？
<img> 是替换元素，其尺寸由固有宽高（intrinsic size）或 HTML width/height 属性决定，aspect-ratio 在它上面无法触发布局计算。
- 现象：高度塌陷为 0，懒加载后突然“跳高”，造成 CLS（累积布局偏移）
- 正确做法：把
aspect-ratio写在外层容器（div），再让<img>填满它：width: 100%+height: 100%+object-fit: cover - 注意：
object-fit不生效的常见原因是漏了width和height声明，或安卓 WebView 对object-fit支持不稳定
兼容旧版 Safari 的降级方案怎么写？
Safari 15.3 及更早版本完全忽略 aspect-ratio，必须 fallback 到 padding-bottom 技巧，且不能依赖 vh 或 vmax —— 它们在某些 iOS 场景下会因地址栏显示/隐藏而抖动。
- 核心原理：
padding-top或padding-bottom的百分比始终相对于父容器宽度计算 - 16:9 →
padding-bottom: 56.25%；正方形 →padding-bottom: 100% - 容器需设
position: relative、width: 100%、height: 0；子元素用position: absolute填满 - 别用文件名猜比例（
cover-16x9.jpg不等于 16:9），要用真实宽高计算百分比
最常被忽略的是：比例控制和内容铺陈是两件事——aspect-ratio 只管容器框，object-fit 才管里面图片怎么放；漏配任何一环，视觉效果都会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
