aspect-ratio 与 width/height 同时设置会失效，因其需至少一个方向尺寸可推导（如 auto、百分比等）；固定宽高应改用 html 属性或 padding-top 技巧；grid/flex 中子项显式宽高会破坏比例；tailwind 的 aspect-* 类需作用于容器且避免显式高度或动态类名。
aspect-ratio 和 width/height 同时写会直接失效
写了 aspect-ratio: 16 / 9 却没反应？大概率是因为你同时写了 width 和 height。浏览器一旦拿到两个确定值，就不再走比例推导逻辑——aspect-ratio 不是覆盖规则，而是参与盒模型计算的“辅助条件”，前提必须是至少一个方向尺寸可推导（即为 auto、百分比、clamp() 或由父容器约束得出）。
-
width: 300px; height: 200px; aspect-ratio: 1 / 1→ 高度被强制设为 200px，比例完全忽略 -
width: 100%; height: auto; aspect-ratio: 4 / 3→ ✅ 宽度由父容器决定，高度自动算出 -
height: 150px; aspect-ratio: 16 / 9→ ✅ 宽度按150 × 16 / 9 = 266.67px推导
想保留固定宽高又需要防抖动？换思路，别硬套 aspect-ratio
如果你明确需要 width: 300px; height: 200px 这样的精确尺寸，又希望图片加载前不塌陷，aspect-ratio 就不是解法——它和固定尺寸互斥。此时该用原生 HTML 属性或降级方案：
- 给
<img>标签直接写width="300" style="max-width:90%"，再配height: autoCSS，浏览器会提前预留空间 - 服务端能返回宽高时，优先在 HTML 中声明属性，比 CSS 更早生效
- 若必须纯 CSS 控制且无法预知尺寸，改用
padding-top百分比技巧（如padding-top: 66.67%对应 3:2），但需额外 wrapper 元素
Grid/Flex 布局中子项写死宽高会破坏 aspect-ratio
在 Grid 或 Flex 容器里，如果子项自己写了 width 或 height，哪怕只写一个，也可能打断比例计算，尤其当父容器轨道定义不匹配时：
- Grid 子项写了
height: 100%→ 若父容器行高未定义（grid-auto-rows缺失），100%退化为auto，但此时aspect-ratio可能因上下文缺失而失效 - Flex 子项写了
flex: 1+height: 200px→ 固定高度优先，比例被跳过 - 正确做法：子项只设
width: 100%（或不设宽）、aspect-ratio，让父容器通过grid-auto-rows: 1fr或flex: 1提供可推导上下文
Tailwind 用户最容易踩的类名陷阱
Tailwind 的 aspect-video 等类本质就是 aspect-ratio: 16 / 9，但失效原因往往不在属性本身：
- 把
aspect-video加在<img>上 → ❌ 它只对容器元素有效，<img>是替换元素，需包裹一层<div> <li>容器加了 <code>h-48或absolute→ 显式高度或脱离文档流，直接覆盖比例逻辑 - 类名动态拼接：
className={`aspect-[${w}/${h}]`}→ JIT 模式扫描不到，不会生成对应 CSS 规则 - Safari 15.3 及更早版本不支持
aspect-ratio，且对斜杠语法静默失败，需插件或降级
真正起作用的最小结构是：<div class="w-full aspect-video"><img class="w-full h-full object-cover"></div> —— 宽度来源、比例容器、内容填充，三者缺一不可。
