aspect-video没高度是因为aspect-ratio需明确宽度基准才能计算高度，无宽度则失效；常见原因包括父容器缺w-full等宽度约束、类加在img等非容器元素上、safari旧版不支持或动态类未编译。
直接结论：用 aspect-video 或 aspect-[16/9] 类本身不难，但 90% 的失效不是写错了类名，而是容器没宽度、浏览器不支持、或类根本没编译进 CSS。
为什么 aspect-video 加了却没高度？
它不是“设置视频比例”的魔法开关，而是依赖浏览器计算高度——而计算必须有明确宽度基准。没有宽度，aspect-ratio 就是除零错误，浏览器直接跳过。
- 父容器是默认
div（width: auto），但没加w-full、max-w-md或flex-1 - 把
aspect-video直接加在<img>标签上——它只对**块级容器元素**生效 - 容器或子元素写了
h-full、absolute+top-0 bottom-0，覆盖了比例推导逻辑 - Safari 15.3 及更早版本完全不识别
aspect-ratio属性，且对aspect-[9/16]斜杠写法静默失败（不报错，也不生效）
怎么验证 aspect-ratio 是否真正生效？
别猜，打开 DevTools → Elements → Computed 面板，搜索 aspect-ratio。如果没出现，或显示为 unset，说明 Tailwind 根本没生成这条 CSS 规则。
- 检查
tailwind.config.js的content字段是否覆盖所有模板路径，比如 React 项目必须含"./src/**/*.{js,jsx,ts,tsx}" - 避免动态拼接类名：
className={`aspect-[${w}/${h}]`}→ JIT 模式扫描不到，CSS 不生成 - 运行
npm list tailwindcss确认版本 ≥ v3.3；v3.2 及更早需手动开启experimental: { aspectRatio: true } - 确认没误启
@tailwindcss/aspect-ratio插件，又没关掉内置功能，导致冲突
图片拉伸变形，光加 aspect-video 还不够
aspect-ratio 只管容器尺寸，不管里面的内容怎么铺。漏掉关键配合类，比例就白设。
- 容器必须有可测量宽度：
w-full、max-w-xs、flex-1（在 flex 容器中） -
<img>必须加w-full h-full object-cover（裁剪填满）或object-contain（完整居中） - 别给
<img>加h-48、h-full等固定或撑高类，它们会覆盖aspect-ratio的自动高度逻辑 - 在 Flex 布局中，若父容器没设
min-w-0，子项可能宽度塌缩为 0，导致比例失效
Safari 下 aspect-[4/3] 静默失败怎么办？
这不是你配置错了，是 Safari 15.4 之前对斜杠语法解析不稳定，尤其构建后常回退到无比例状态。
- 改用小数写法：
aspect-[0.75]（即 4 ÷ 3），CSS 层面完全等价，兼容性更稳 - 动态比例务必先算好数值再注入，例如
className={`aspect-[${ratio}]`}，其中ratio = w / h - 需要兼容 Safari 15.3 或更低版本时，必须退回
pt-[56.25%]+relative+absolute inset-0方案，且不能和aspect-ratio类混用 - 验证方式：Safari 开发者工具中查看 Computed 样式里是否有
aspect-ratio: 0.75
最易被忽略的一点：aspect-ratio 是 CSS 层的声明，它不感知图片是否加载完成。若图片原始尺寸远大于容器，又没配 object-fit 和 overflow-hidden，仍会视觉溢出——比例控的是框，不是内容本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
