aspect-ratio必须配合明确宽度且不能声明height才生效，否则浏览器跳过计算；它仅在宽度可测、高度未锁定时推导尺寸，常见失效原因包括无width/max-width、height冲突、作用于替换元素或旧版safari静默忽略。
直接写 aspect-ratio 不会生效，必须配合明确的宽度约束且不能声明 height，否则浏览器跳过计算——这是 90% 的“不生效”问题根源。
为什么 aspect-ratio 写了却没高度？
它不是独立尺寸控制属性，而是「在已知一个方向尺寸的前提下，推导另一个方向」。如果容器宽度不可测（比如父级 display: inline-block 且无 width），或你显式写了 height: auto、height: 100%，浏览器就认为高度已确定，直接忽略 aspect-ratio。
- 常见错误：只写
aspect-ratio: 16 / 9，没设width或max-width→ 容器宽度为0，高度也为0 - Flex/Grid 中失效：子项设了
flex: 0 0 auto或align-items: stretch强行撑高，覆盖比例计算 - DevTools 里看到
aspect-ratio被划掉？大概率是浏览器不支持（如 Safari 15.3 及更早）或存在冲突声明
怎么写才真正稳定生效？
核心是保证「宽度可测量 + 高度未锁定」。推荐组合有两类，按场景选：
-
width: 100%; aspect-ratio: 16 / 9;→ 适合响应式卡片、列表项，随父级变宽，高度自动算出 -
max-width: 400px; aspect-ratio: 4 / 3;→ 更安全，防大图撑破布局；width可省略，默认auto仍能触发计算 - Grid/Flex 子项中：只要列轨道或主轴有约束（如
grid-template-columns: 1fr 200px），aspect-ratio就能基于所在轨道宽度生效
注意：min-height 和 max-height 不会阻止它生效，但若值太小，可能视觉上裁掉内容。
和 object-fit 配合时容易踩的坑
aspect-ratio 只管容器“框”的比例，不管里面图片怎么铺。漏配 object-fit 或尺寸声明，图片照样拉伸变形或溢出。
-
<img>必须加width: 100%; height: 100%，否则object-fit不触发 -
object-fit: cover最常用，但会裁边；contain保留完整，留白；fill强制拉满，必失真 - 别给
<img>直接设aspect-ratio—— 替换元素不参与布局计算，写了也无效 - 安卓 WebView（尤其 UC、旧版三星）对
object-fit支持不稳定，真机测试不能跳过
兼容旧浏览器的 fallback 方案
Safari 15.3 及更早、部分安卓 WebView 会静默忽略 aspect-ratio，@supports 也不可靠（老浏览器不识别该规则，整块样式被跳过）。必须用双写法：
- 现代写法在前：
aspect-ratio: 16 / 9; - padding-bottom hack 在后：
position: relative; width: 100%; height: 0; padding-bottom: 56.25%;（16:9 → 9÷16×100%） -
<img>设position: absolute; top: 0; left: 0; width: 100%; height: 100%
关键点：padding 百分比基于父宽，所以父容器必须有明确宽度来源；否则 fallback 也会失效。
真正难处理的不是语法，而是服务端返回的宽高比不确定时硬写死 16 / 9，会导致裁切或大片留白；还有 Safari 15.0–15.3 的静默失效——本地开发测不出来，上线后用户反馈才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
