优先用Tailwind v3.3+内置aspect-ratio类，但必须确保父容器有可测量宽度、浏览器支持（Chrome 88+/Safari 15.4+）、配置正确（JIT启用、content覆盖所有路径、无动态拼接）；插件方案仅用于兼容Safari 15.3及更低版本。
直接说结论：优先用 Tailwind v3.3+ 内置 aspect-ratio 类，但必须确保父容器有可测量宽度、浏览器支持、配置正确；插件方案仅在需兼容 Safari 15.3 或更低版本时才值得启用。
为什么 aspect-video 加了却没高度
这不是类名写错，而是 aspect-ratio 失效的典型表现：容器高度塌陷、图片拉伸、整个区域不可见。根本原因是浏览器无法计算高度——它需要一个明确的宽度基准来推导。
常见原因包括：
- 父容器没设显式宽度，比如只写
<div class="aspect-video"></div>，而没加w-full、max-w-md或flex-1 - 给
<img>标签本身加了aspect-video—— 这个类只对**容器元素**生效，不是图片的属性 - 容器或子元素写了
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 只管容器尺寸，不管内容怎么填。漏掉关键配合类，就会白写。
标准写法如下：
立即学习“前端免费学习笔记（深入）”；
<div class="w-full aspect-video"> <img src="..." class="w-full h-full object-cover"> </div>
关键点：
- 容器必须有明确宽度来源：
w-full、max-w-lg、flex-1（在 flex 容器中）、col-span-2（在 grid 中） -
<img>必须加w-full h-full，否则原始尺寸会撑开或压缩容器 - 必须指定
object-cover（裁切填充）或object-contain（完整显示），否则默认object-fit: fill会破坏比例 - 避免在容器上写
display: flex或display: grid，aspect-ratio对这些 display 值无效
当必须兼容老浏览器时，padding-top 方案怎么写才稳
若项目需支持 Safari 15.3 或更低版本，padding-top hack 是目前最可靠的 fallback，但它不是“随便加个 pt”就行。
核心要求：
- 父容器必须是块级且有明确宽度（如
w-full），因为padding-top: 56.25%的百分比是相对于父宽计算的 - 不能用
pt-64这类固定值代替百分比，它无法随容器缩放 - 子内容需用
absolute inset-0 w-full h-full才能填满，且容器本身要加relative - 不要和内置
aspect-ratio类混用，二者逻辑互斥，选一个主方案即可
容易被忽略的一点是：即使你写了 aspect-square，只要父容器宽度为 0（比如 flex 子项没设 flex-1 或 min-w-0），整个容器就“消失”了——这比语法错误更难排查。
