video元素不支持aspect-ratio，需用div包裹并设aspect-ratio，video设宽高100%+object-fit，旧浏览器需@supports降级为padding-top方案。
video 元素不能直接设 aspect-ratio
浏览器会忽略 video { aspect-ratio: 16 / 9 }，因为 video 是替换元素（replaced element），其固有宽高比由视频元数据决定，CSS 的 aspect-ratio 对它不生效。常见错误现象是容器高度塌陷为 0，或视频被强行拉伸变形。
必须用一层 div 包裹 video，把 aspect-ratio 写在父容器上，例如：.video-wrapper。同时务必移除 video 标签上的内联 width 和 height 属性（如 width="640" height="360"），否则会覆盖 CSS 控制逻辑，加剧布局抖动。
正确写法：容器设比例 + video 填满 + object-fit 控制渲染
核心组合是三部分缺一不可：
-
.video-wrapper设width: 100%+aspect-ratio: 16 / 9+display: block（避免 Safari flex 容器中失效） -
video设width: 100%+height: 100%+object-fit: cover（填满裁边）或object-fit: contain（完整居中） - 若需严丝合缝铺满，
.video-wrapper加position: relative，video加position: absolute; inset: 0
不加 object-fit 会导致视频内容溢出、留黑边或拉伸——aspect-ratio 只管容器盒模型，不管内部怎么显示。
@supports 降级：旧浏览器 fallback 必须兜底
仅靠 aspect-ratio 在 iOS Safari 15.3 及更早、微信 X5 内核等环境中会完全失效，导致高度为 0。不能只写新语法，必须用 @supports 包裹现代写法，并在外层提供 padding-top 方案：
✅ 正确结构：
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
}
.video-wrapper > video {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
}
@supports (aspect-ratio: 1 / 1) {
.video-wrapper {
padding-top: 0;
aspect-ratio: 16 / 9;
}
.video-wrapper > video {
position: static;
}
}
⚠️ 注意：padding-top: 56.25% 不能写成 56% 或 56.2%——精度差 0.05% 就会导致明显偏形；父容器也不能设 height，否则压垮 padding 计算。
移动端和 Tailwind 中的典型陷阱
在 iOS Safari 15.4+ 和 Android Chrome 88+ 以外的环境（如微信、钉钉内置浏览器），aspect-ratio 几乎必然失效。Tailwind 的 aspect-video 类看似方便，但实际是通过 JIT 编译生成 padding-top: 56.25% 回退实现的，前提是配置了正确的 content 路径且未动态拼接 class 名（如 className={`aspect-${ratio}`} 会失效）。
容易被忽略的关键点：
- Flex/Grid 容器中，
aspect-ratio可能被隐式规则覆盖：Flex 子项需加flex-shrink: 0，Grid 子项加min-height: 0 -
max-width必须配合使用，否则大屏下容器可能无限拉伸；推荐写width: 100%; max-width: 100vw; - 调试时检查 computed styles 中
aspect-ratio是否显示为 “active”，而非灰色 inactive 状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
