aspect-video 是 tailwind css 中设置 16/9 宽高比的工具类，仅应用 css aspect-ratio 属性，不控制子元素尺寸或拉伸行为，需配合 w-full h-full object-cover 等类防止溢出或变形。
aspect-video 是什么，它到底设了什么比例
aspect-video 是 Tailwind CSS 提供的预设宽高比工具类，对应 aspect-ratio: 16 / 9。它**只设置 CSS 的 aspect-ratio 属性**，不控制宽度、高度、最大尺寸或内容拉伸行为——这点常被误读。浏览器支持上，aspect-ratio 在 Chrome 88+、Firefox 89+、Safari 15.4+ 可用；旧版 Safari（如 iOS 15.2）需回退方案。
直接用 aspect-video 为什么视频/图片经常“溢出”或“变形”
常见现象：加了 aspect-video 的 <div> 里放 <code><video></video> 或 <img>，内容撑破容器、黑边位置不对、缩放失真。根本原因是：aspect-ratio 仅约束容器自身比例，不自动约束子元素。子元素默认按原始尺寸渲染，除非显式限制。
- 对
<video></video>：必须加class="w-full h-full object-cover"（或object-contain），否则视频固有尺寸优先 - 对
<img>：同样要加w-full h-full object-cover，且确保父容器有明确宽（如w-full或固定值） - 若父容器无宽度上下文（比如在 flex 容器中未设
flex-1或min-w-0），aspect-video可能失效——此时容器宽度塌缩为 0，高度计算失去基准
响应式流式排版：怎么让 aspect-video 配合不同屏幕表现一致
纯 aspect-video 是静态比例，要实现真正流式（比如移动端切 4:3、桌面端保持 16:9），不能只靠一个类。Tailwind 不提供响应式 aspect 工具类，需手动组合：
- 用断点前缀：例如
md:aspect-video sm:aspect-[4/3]—— 注意aspect-[4/3]是自定义比例，需确认已启用aspectRatio插件（v3.3+ 默认开启） - 避免在
grid或flex子项中直接写aspect-video而不设宽：推荐包裹一层relative w-full容器，再在内部绝对定位内容 - 视频封面图场景：用
aspect-video relative+absolute inset-0 w-full h-full object-cover的<img>，再叠absolute inset-0的播放按钮，结构更可控
兼容性兜底：没有 aspect-ratio 怎么模拟等宽高比
当目标环境不支持 aspect-ratio（如老版 Safari 或 IE），可基于 padding-top 技巧手动实现。Tailwind 本身不提供该方案，但可通过自定义 class 或内联样式补位：
.aspect-video-fallback {
position: relative;
width: 100%;
}
.aspect-video-fallback::before {
content: "";
display: block;
padding-top: calc(9 / 16 * 100%); /* 16:9 */
}
.aspect-video-fallback > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
实际使用时，用 className="aspect-video-fallback" 替代 aspect-video，并确保子元素是唯一直接子节点。这个技巧在 Next.js App Router 中尤其要注意 SSR 和 hydration 一致性——服务端不执行 JS，所以 padding 方案比 JS 动态计算更可靠。
真正容易被忽略的是：流式排版的“流”，不在比例工具本身，而在容器宽度是否随布局真实流动。哪怕用了 aspect-video，如果外层是 inline-block 或未清除浮动，比例也会失效。先稳住宽度上下文，再谈高宽比。
