aspect-video没高度是因为aspect-ratio需明确宽度基准才能计算高度，无宽度则失效；常见原因包括父容器缺w-full等宽度约束、类加在img等非容器元素上、Safari旧版不支持或动态类未编译。
aspect-ratio 属性在 Tailwind 中不是直接写的 CSS，而是通过预设类（如 aspect-video）或任意值语法（如 aspect-[16/9]）生成的。它**只对有明确宽度基准的块级容器生效**，且依赖浏览器原生支持 —— 不是“加了就起作用”的魔法类。
为什么 aspect-video 加了却没高度？
根本原因是浏览器无法推导高度：没有宽度，aspect-ratio 就像除以零，直接被忽略。
- 父容器是默认
div（width: auto），但没加w-full、max-w-md或flex-1 - 把
aspect-video直接加在<img alt="怎么在Tailwind CSS中使用aspect-ratio属性" >或<video></video>标签上 —— 它只对**容器元素**（如<div>）有效 <li>容器或子元素写了 <code>h-full、absolute+top-0 bottom-0，覆盖了比例计算逻辑 - Safari 15.3 及更早版本完全不识别
aspect-ratio，且对aspect-[4/3]这种斜杠写法静默失败（不报错，也不生效） - 如果没出现，或显示为
unset，说明 Tailwind 根本没生成这条 CSS 规则 - 检查
tailwind.config.js的content字段是否覆盖所有模板路径（React 项目必须含"./src/**/*.{js,jsx,ts,tsx}"） - 运行
npm list tailwindcss确认版本 ≥ v3.3；v3.2 及更早需手动开启experimental: { aspectRatio: true } - 避免动态拼接类名：
className={`aspect-[${w}/${h}]`}→ JIT 扫描不到，CSS 不生成 - 容器必须有可测量宽度：
w-full、max-w-xs、flex-1（在 flex 容器中） -
<img alt="怎么在Tailwind CSS中使用aspect-ratio属性" >必须加w-full h-full object-cover（裁剪填满）或object-contain（完整居中） - 别给
<img alt="怎么在Tailwind CSS中使用aspect-ratio属性" >加h-48、h-full等固定或撑高类，它们会覆盖aspect-ratio的自动高度逻辑 - 对于
<video></video>，不能直接加aspect-video；必须用<div class="aspect-video"><video class="absolute inset-0 w-full h-full object-contain"></video></div> - 改用小数写法：
aspect-[1.3333]（即 4 ÷ 3），CSS 层面完全等价，兼容性更稳 - 动态比例务必先算好数值再注入，例如
className={`aspect-[${ratio}]`}，其中ratio = w / h，且ratio是小数字符串（如"1.3333"） - 若需兼容 Safari 15.3 或更低版本，必须退回
pt-[56.25%]+relative+absolute方案，并用@supports (aspect-ratio: 1)渐进增强
怎么验证 aspect-ratio 是否真正生效？
别靠肉眼猜。打开 DevTools → Elements → Computed 面板，搜索 aspect-ratio：
图片/视频内容拉伸变形，光加 aspect-video 不够
aspect-ratio 只管容器尺寸，不管里面的内容怎么铺。漏掉关键配合类，比例就白设。
Safari 下 aspect-[4/3] 静默失效怎么办？
这不是你配置错了，是 Safari 15.4 之前对斜杠语法解析不稳定，尤其构建后常回退到无比例状态。
立即学习“前端免费学习笔记（深入）”；
aspect-[16/9]，而是容器宽度来源不可测、浏览器版本被忽略、或类名根本没编译进 CSS —— 这些细节不查 DevTools 和终端输出，光看页面表现永远找不到根因。
