aspect-ratio必须作用于外层容器且需明确宽度、禁用height才生效；直接用于video或img无效，因其为替换元素；常见失效原因包括无宽度约束、height冲突、父容器flex布局兼容性问题及语法错误。
直接用 aspect- 开头的类，但必须确保容器有明确宽度，且不能同时设 h- 类。
为什么 aspect-video 加了没反应？
因为 aspect-video（对应 aspect-ratio: 16 / 9）依赖父容器的宽度来计算高度——如果容器本身没宽度（比如没加 w-full、max-w-md 或处于 flex 中没设 flex-1），浏览器就无法推算高度，直接忽略该规则。
- 常见错误：
<div class="aspect-video"><video></video></div>→ 容器没宽度，比例失效 - 正确写法：
<div class="w-full aspect-video"><video class="absolute inset-0 w-full h-full object-contain"></video></div> -
<video></video>标签自身不能直接加aspect-类，它是替换元素（replaced element），不响应aspect-ratio的布局逻辑
如何设置非标准宽高比，比如 21:9 或 4:5？
Tailwind v3.3+ 支持任意值语法 aspect-[x/y] 或小数形式 aspect-[0.xxxx]，但注意格式限制和兼容性。
- 合法写法：
aspect-[21/9]、aspect-[4/5]、aspect-[0.8]（4/5 = 0.8） - 非法写法：
aspect-[21:9]、aspect-[80%]、aspect-[calc(4/5)]（JIT 编译器不解析 CSS 函数） - 必须配合宽度类，例如
w-full aspect-[4/5]；单独用aspect-[4/5]无效 - 旧版 Tailwind（v3.2 及更早）需手动开启
experimental.aspectRatio才能使用
为什么加了 aspect-square 还是不成正方形？
最常被忽略的是「冲突的高度类」。一旦你显式设置了 h-48、h-full 或 min-h-64，它们会覆盖 aspect-ratio 自动计算出的高度，导致比例失效。
- 错误组合：
aspect-square h-64→ 高度被锁死为 16rem，不再随宽度变化 - 正确组合：
aspect-square w-64（宽度固定，则高度自动为 64px）或aspect-square w-full max-w-md（响应式宽度 + 自动高度） - 如果需要最小尺寸约束，用
min-w-64而非min-h-64，避免干扰比例逻辑
宽高比不是“独立样式”，它是个依赖链：宽度 → 比例 → 高度。断掉任何一环，aspect-ratio 就只是个摆设。尤其要注意那些看似无害的 h- 类，它们往往是静默破坏者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
