aspect-ratio不能直接写在video元素上，因其是替换元素，宽高比由视频元数据或HTML width/height属性决定，CSS该属性对其无效；必须用容器包裹并设aspect-ratio: 16 / 9、width: 100%，video内设width: 100%; height: 100%; object-fit: cover，同时移除video的width/height属性。
aspect-ratio 不能直接写在 <video> 上，写了也没用——这是浏览器规范决定的，不是你漏写了某个 class 或忘了加 vendor prefix。
为什么 video { aspect-ratio: 16 / 9 } 完全没反应？
<video> 是替换元素（replaced element），它的宽高比由视频文件元数据或 HTML width/height 属性决定，CSS 的 aspect-ratio 对它完全忽略。你在 DevTools 里看到该属性被划掉，大概率就是这个原因。
- 常见现象：视频高度为 0、压成一条线、加载后突然跳动、横竖屏切换比例错乱
- 内联
width="640" height="360"会强制覆盖 CSS 行为，必须删掉 - 即使现代 Chrome/Firefox 支持
aspect-ratio，只要<video>自身有固有尺寸或显式 height，计算就会被跳过
必须用容器包裹，且满足「宽度可测 + 高度未锁定」
真正生效的组合只有一类：外层容器设 aspect-ratio + 明确宽度约束 + 不设 height。
- ✅ 推荐写法：
width: 100%; aspect-ratio: 16 / 9;—— 适合响应式卡片、列表项，随父级变宽，高度自动算出 - ✅ 更安全写法：
max-width: 400px; aspect-ratio: 4 / 3;—— 防大图撑破布局，width可省略，默认auto仍能触发计算 - ❌ 危险写法：
aspect-ratio: 16 / 9;单独使用，无width或max-width→ 容器宽度为 0，高度也为 0 - Flex/Grid 子项中若设了
flex: 0 0 auto或align-items: stretch，会强行撑高，覆盖比例计算
如何让视频填满容器且不拉伸？
aspect-ratio 只管容器“框”的比例，不管里面内容怎么铺。漏配 object-fit 和尺寸声明，视频照样溢出或变形。
- 容器需设
position: relative（Tailwind 的relative或手动加） -
<video>必须设position: absolute; inset: 0; width: 100%; height: 100% -
object-fit: cover最常用，填满但可能裁边；object-contain保留完整但留黑边；object-fill强制拉满，必失真 - 别给
<video>加height: auto或height: 100%，这会让浏览器认为高度已确定，直接忽略aspect-ratio
Tailwind 用户注意 aspect-video 的实际行为
Tailwind 的 aspect-video 是通过 padding-top: 56.25% + position: relative 回退实现的，不是直接调用原生 aspect-ratio。
立即学习“前端免费学习笔记（深入）”；
- 它只能用在块级、相对/绝对定位的
<div>上，不能直接加在<video>标签上 -
aspect-[16/9]仅在 Tailwind v3.2+ + JIT 模式启用时有效；动态拼接 class（如className={`aspect-${ratio}`}）会导致编译失败 - 移动端 Safari 15.4+ 才原生支持
aspect-ratio，旧版靠 padding 回退，兼容性没问题，但要注意overflow: hidden可能意外截断内容
aspect-ratio 不是尺寸控制，而是推导规则」——它需要一个明确的宽度输入，才能输出高度；一旦这个前提被 flex 布局、替换元素特性或内联属性破坏，整个链路就断了。 
