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 不是“魔法”，它需要一个明确的宽度作为计算基准，再推导出对应高度。没有这个宽度，比例就无从谈起。

• 漏掉显式宽度类：比如只写
  ，但没加 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）
• 用在 或 标签自身上——aspect-video 只作用于**包裹容器**，对媒体元素无效

怎么让 aspect-video 和图片/视频真正配合？

仅设容器比例，不控制内容渲染，结果就是溢出、黑边错位、拉伸变形。必须组合定位与裁剪行为。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 容器加 relative overflow-hidden：防止 object-cover 裁剪后的内容溢出可见区域
• 媒体元素加 absolute inset-0 w-full h-full：确保铺满整个比例容器
• 必须加 object-cover（填满裁剪）或 object-contain（完整居中），否则按原始尺寸渲染，无视容器比例
• 若用 ，记得加 alt；若用 ，建议加 preload="metadata" 减少 SSR 或懒加载时的高度塌陷

aspect-video 在 Safari 上失效的常见原因

Safari 15.4 是分水岭版本。此前的 Safari（包括 iOS 15.2/15.3）不支持原生 aspect-ratio，而 Tailwind 的回退机制（padding-top + relative）在某些构建配置下可能被破坏。

• 写 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 确实编译进了 CSS，但它的生效链条太长——要过构建配置、浏览器支持、容器 display、父级宽度、子元素定位、裁剪方式六道关。任一环节断开，都会表现为“没效果”，而不是报错。