aspect-video没效果是因为aspect-ratio属性未生效，主因是父容器无显式宽度（如缺w-full）、错误加在img标签上、被h-full/absolute等样式覆盖，或Safari 15.3及更早版本不支持斜杠语法。
为什么直接加 aspect-video 没效果
这不是类名写错，而是 aspect-ratio 属性根本没生效。它需要一个明确的宽度基准来推导高度，宽度为 0 就算不出任何值。
- 父容器没设显式宽度（比如只写
<div class="aspect-video">，漏了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 是否真正编译进 CSS
打开 DevTools → Elements → Computed 面板，搜索 aspect-ratio。如果没出现，或显示为 unset，说明 Tailwind 根本没生成该规则。
- 检查
tailwind.config.js的content字段是否覆盖所有模板路径（如"./src/**/*.{js,jsx,ts,tsx}"） - 避免动态拼接类名：
className={`aspect-[${w}/${h}]`}→ JIT 扫描不到，必须写死或用条件判断 - 运行
npm list tailwindcss确认版本 ≥ v3.3；v3.2 及更早需手动开启experimental: { aspectRatio: true } - 确认没同时启用
@tailwindcss/aspect-ratio插件又没关掉内置功能，导致冲突
aspect-[x/y] 写法在 Safari 下为什么经常失效
斜杠语法看着直观，但在 Safari 15.4 之前解析不稳定，尤其构建后或某些 Vite/Webpack 配置下会静默失败，回退到无比例状态。
- 推荐改用小数写法：
aspect-[0.5625]（即 9 ÷ 16），CSS 层面等价，兼容性更稳 - 动态计算时别拼字符串
"aspect-[" + w + "/" + h + "]"，先算好小数再注入 - 验证方式：Safari 开发者工具中查看 computed 样式里是否有
aspect-ratio: 0.5625 - 若需兼容 Safari 15.3 或更低版本，退回
pt-[56.25%]+relative/absolute方案，但二者不能混用
图片容器和 <img> 必须怎么配合才不拉伸
aspect-ratio 只管容器尺寸，不管内容怎么填。漏掉关键配合类，就会白写。
立即学习“前端免费学习笔记（深入）”；
- 容器必须有明确宽度来源：
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，除非你额外加min-w-0 shrink-0防止 Flex 默认行为压缩图片
<div class="w-full aspect-video"><img src="" class="w-full h-full object-cover"></div>。宽高比依赖宽度存在，而宽度依赖你主动给容器“定规矩”——这点最容易被忽略。 
