aspect-video 能设 16:9 容器，但需 Tailwind v3.3+（或旧版启用 aspectRatio 实验特性）、父容器有可测量宽度、浏览器支持 aspect-ratio（Safari 15.4+），缺一不可；否则因无宽度基准导致高度塌陷。
aspect-video 能直接设 16:9 容器，但只在满足三个硬性条件时才真正生效：Tailwind v3.3+（或 v3.0–3.2 启用了 experimental: { aspectRatio: true }）、父容器有可测量宽度、浏览器支持 aspect-ratio CSS 属性（Safari 15.4+ 起稳定）。
为什么加了 aspect-video 容器却没高度？
根本原因是 aspect-ratio 不是“魔法”，它需要一个明确的宽度作为计算基准，再推导出对应高度。没有这个宽度，比例就无从谈起。
- 漏掉显式宽度类：比如只写
<div class="aspect-video">，但没加 <code>w-full、max-w-md、flex-1（在 flex 容器中）或col-span-2（在 grid 中） - 父级是 flex/grid 容器，且子项未设
min-w-0或flex-1，导致宽度塌缩为 0 - 容器本身被设为
display: flex或display: grid，而aspect-ratio在这些 display 类型下默认不生效（需显式覆盖为block或inline-block） - 用在
<video></video>或<img alt="如何在Tailwind CSS中设置容器纵横比_使用v3内置的aspect-video类" >标签自身上——aspect-video只作用于**包裹容器**，对媒体元素无效 - 容器加
relative overflow-hidden：防止object-cover裁剪后的内容溢出可见区域 - 媒体元素加
absolute inset-0 w-full h-full：确保铺满整个比例容器 - 必须加
object-cover（填满裁剪）或object-contain（完整居中），否则按原始尺寸渲染，无视容器比例 - 若用
<img alt="如何在Tailwind CSS中设置容器纵横比_使用v3内置的aspect-video类" >，记得加alt；若用<video></video>，建议加preload="metadata"减少 SSR 或懒加载时的高度塌陷 - 写
aspect-[16/9]而非aspect-video：Safari 对方括号内斜杠语法解析不稳定，推荐改用小数写法aspect-[0.5625]（即 9÷16） - 使用了动态拼接 class：如
className={`aspect-${ratio}`}，JIT 编译器无法提取，CSS 规则根本不会生成 - 服务端渲染（SSR）环境下，若组件异步加载且未等待样式注入完成，首屏可能漏掉
aspect-video对应的 padding 样式 - 检查 DevTools 的 Computed 面板，确认
aspect-ratio: 16 / 9是否真实存在且未被其他 display 值屏蔽
怎么让 aspect-video 和图片/视频真正配合？
仅设容器比例，不控制内容渲染，结果就是溢出、黑边错位、拉伸变形。必须组合定位与裁剪行为。
aspect-video 在 Safari 上失效的常见原因
Safari 15.4 是分水岭版本。此前的 Safari（包括 iOS 15.2/15.3）不支持原生 aspect-ratio，而 Tailwind 的回退机制（padding-top + relative）在某些构建配置下可能被破坏。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的一点：你写的 aspect-video 确实编译进了 CSS，但它的生效链条太长——要过构建配置、浏览器支持、容器 display、父级宽度、子元素定位、裁剪方式六道关。任一环节断开，都会表现为“没效果”，而不是报错。
