aspect-video 可快速设置16:9容器，但需避免设height、用于块级相对/绝对定位div，不可直接加video标签；须配合object-fit控制内容显示，并确保JIT启用及class不拼接。

用 aspect-video 快速设置 16:9 视频容器

直接加 aspect-video 就能固定 16:9，但前提是容器本身不设死高度、不写 height，否则会冲突。Tailwind 的 aspect-ratio 工具本质是靠 padding-top 百分比撑开父容器，所以它只对块级、相对/绝对定位的容器生效。

• 必须用在 div 这类包裹容器上，不能直接加在 <video> 标签上
• 如果父容器有 display: flex 且没设 flex-direction: column，可能被拉伸变形
• 移动端 Safari 15.4+ 才原生支持 aspect-ratio CSS 属性，Tailwind v3.0+ 的 aspect-video 是通过 padding-top: 56.25% + position: relative 回退实现的，兼容性没问题

为什么 aspect-[16/9] 不生效？

自定义比例如 aspect-[16/9] 在 Tailwind v3.2+ 才支持，旧版本会直接忽略。更关键的是：这个语法需要开启 JIT 模式（content 配置正确），且不能出现在动态拼接的 class 字符串里（比如 className={`aspect-${ratio}`}），否则编译时无法提取到。

• 检查 tailwind.config.js 中是否启用了 content 并包含对应模板路径
• 避免在 React/Vue 中用字符串拼接生成 aspect-* 类名，改用条件 class：className={ratio === '16/9' ? 'aspect-video' : 'aspect-square'}
• 如果用的是 PostCSS 插件而非 JIT，aspect-[16/9] 根本不会生成 CSS 规则

object-fit 和 aspect-ratio 要配着用

仅设 aspect-video 只控制容器尺寸，视频内容仍可能拉伸或留黑边。得配合 object-contain、object-cover 或 object-fill 控制内部 <video> 渲染方式。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• object-contain：完整显示，居中，可能有上下/左右黑边
• object-cover：填满容器，裁剪边缘，适合封面图或强调视觉冲击的场景
• 别忘了给 <video> 加 absolute inset-0 w-full h-full，否则它不会铺满父容器

React 中常见错：视频容器高度塌陷

典型现象是页面加载后容器高度为 0，视频压成一条线。根本原因是父容器没触发 BFC，或者视频元素还没加载完就计算了尺寸。

立即学习“前端免费学习笔记（深入）”；

• 确保包裹 <video> 的 div 有 relative，且没被其他样式（如 overflow: hidden）意外截断
• 不要在 useEffect 里手动改 style.height，会覆盖 Tailwind 的 padding-top 机制
• 服务端渲染（SSR）时若用 next/dynamic 懒加载视频组件，需加 ssr: false，否则 aspect-ratio 相关样式可能漏掉

Tailwind 的 aspect-ratio 工具看着简单，实际依赖容器流式行为、CSS 定位上下文和构建配置三者咬合。最常被忽略的是：它不修内容，只修容器；不保加载，只保结构。