优先用Tailwind v3.3+内置aspect-ratio类，但必须确保父容器有可测量宽度、浏览器支持（Chrome 88+/Safari 15.4+）、配置正确（JIT启用、content覆盖所有路径、无动态拼接）；插件方案仅用于兼容Safari 15.3及更低版本。
直接结论：用 aspect-ratio 类（Tailwind v3.3+）是最轻量、无 JS 的解法，但必须满足三个硬条件——父容器有可测量宽度、浏览器支持（Chrome 88+/Safari 15.4+）、Tailwind 配置正确；否则会完全失效，表现为高度塌陷、图片拉伸、区域不可见。
为什么 aspect-video 加了却没高度？
这不是类名写错，而是 aspect-ratio 失效的典型症状。根本原因是浏览器无法推导高度——它需要一个明确的宽度基准来算出对应高度。
- 父容器没设显式宽度，比如只写
<div class="aspect-video"></div>，而没加w-full、max-w-md或flex-1 - 把
aspect-video直接加在<img>标签上——这个类只对**容器元素**生效，不是图片自身的属性 - 容器或子元素写了
h-48、h-full、absolute、top-0 bottom-0，直接覆盖比例逻辑 - Safari 15.3 及更早版本不支持
aspect-ratio属性，且对aspect-[9/16]这种斜杠写法静默失败（不报错，也不生效）
如何验证 aspect-ratio 是否真正编译进 CSS？
打开 DevTools → Elements → Computed 面板，搜索 aspect-ratio。如果没出现，或显示为 unset，说明 Tailwind 根本没生成该规则。
- 检查
tailwind.config.js中的content字段是否覆盖所有模板路径，例如 React 项目必须包含"./src/**/*.{js,jsx,ts,tsx}" - 有没有动态拼接类名：
className={`aspect-[${w}/${h}]`}→ JIT 模式扫描不到，必须写死或用条件判断 - Tailwind 版本是否 ≥ v3.3：
npm list tailwindcss查看；v3.2 及更早需手动开启experimental: { aspectRatio: true } - 是否误启用了
@tailwindcss/aspect-ratio插件，又没关掉内置aspectRatio，导致两个方案冲突
怎么写兼容性安全的占位结构？
aspect-ratio 只管容器尺寸，不管内容怎么填。漏掉关键配合类，就会白写。
立即学习“前端免费学习笔记（深入）”；
- 容器必须有明确宽度约束，比如
w-full或max-w-4xl，不能是inline-block或未设宽的 flex 子项 - 图片本身只设
w-full h-full object-cover，不要加h-64等固定高度类 - 需兼容 iOS 15.4 之前版本时，必须 fallback：
padding-top: 56.25%（16:9）+position: relative+ 子元素position: absolute inset-0 - 用
@supports (aspect-ratio: 1)把padding-top设为0，否则新旧规则共存会多出空白 - 别用
min-height替代padding-top——它不参与文档流占位，无法阻止后续内容上浮
最易被忽略的是：哪怕你写了 aspect-video，只要父容器是 flex 且没给主轴尺寸约束（比如没写 flex-1 或 w-full），或者容器被 overflow: hidden 截断，aspect-ratio 就不会触发计算——它不是魔法，只是 CSS 属性，依赖渲染上下文完整可用。
