object-fit: cover 在 video 上不生效是因为其需明确渲染尺寸，而 position: absolute 未设宽高时 content box 无法计算；须配合显式宽高、父容器定位与高度约束、object-position 等三层控制才能正确居中裁切。
video 加 object-fit: cover 还是留黑边？不是写错了，是缺了三层约束：父容器没高度、video 没显式尺寸、定位没锚定边界。
为什么 object-fit: cover 在 position: absolute 的 video 上不生效
因为 object-fit 只对「有明确渲染尺寸」的替换元素起作用。当 video 设为 position: absolute 却没写 width 和 height，浏览器无法计算它的 content box 大小，cover 就像想盖被子却找不到床——压根没地方可 cover。
常见错误现象：
-
video被设了top: 0; left: 0;，但没写width: 100%; height: 100%，结果只显示左上角一小块 - 父容器用
height: auto或没设min-height，导致 100% 计算结果为 0 - 忘了清除
body默认的margin，造成顶部/侧边白边
实操建议：
- 给
video显式设置width: 100%; height: 100%，配合top: 0; left: 0; position: absolute - 其直接父容器必须设
position: relative或position: fixed，且带明确高度约束，例如min-height: 100vh - 加
display: block消除默认inline带来的底部留白
如何让全屏视频背景始终居中并裁剪适配不同屏幕
靠 object-fit: cover 单独做不到“居中”，它只控制缩放填充方式；靠 transform: translate(-50%, -50%) 也不行，会破坏响应性，尤其在视口缩放或横竖屏切换时错位。
真正可控的路径是两层定位：
- 外层：用
position: absolute+ 四边为 0（top: 0; right: 0; bottom: 0; left: 0）把video“钉死”在父容器可视区边界 - 内层：用
object-fit: cover让视频内容等比缩放并填满这个已锁定的盒子 - 再加
object-position: center center确保关键区域（比如人脸）始终在画面中央，而不是默认左上对齐
注意：object-position 必须和 object-fit 同时存在才有效；单独写没作用。
移动端自动播放失败、黑边、控件残留怎么解决
这不是 CSS 能单方面解决的问题，涉及浏览器策略与渲染机制交叉影响。
常见现象：
- iOS Safari 不加
playsinline会强制全屏，退出后视频暂停 - Android WebView ≤4.4 不支持
object-fit，直接 fallback 为拉伸变形 - 视频首帧用
poster图但比例不对，加载前先按 poster 尺寸撑开盒子，造成闪动或错位
实操建议：
-
video标签必须同时带autoplay muted playsinline loop，缺一不可 - 移除
poster，或确保它和视频原始宽高比完全一致（如都是 16:9） - 兼容老 Android：用 JS 检测
CSS.supports('object-fit', 'cover')，不支持时改用transform: scale()+ 负 margin 模拟 - 避免在
video:-webkit-full-screen里硬写宽高，不同系统全屏容器结构不同，容易错位
object-fit: cover 一定会裁切，但裁哪里由你控制
很多人误以为 cover 是“智能居中裁切”，其实它默认从左上角开始铺满——也就是关键内容很容易被切掉。这时候 object-position 就成了救命稻草。
比如视频主体是人物半身像，原始画面偏上，你希望始终露出脸部：
- 用
object-position: 50% 30%把内容垂直向上挪一点（第二值越小越往上） - 调试时可临时加
outline: 1px solid red查看video元素实际渲染边界 - 不要依赖视口单位（如
100vw）直接设在video上——这会让object-fit的计算基准失效
最常被忽略的一点：裁切不是 bug，是 cover 的必然行为。选素材时优先用横屏（16:9）、避免竖屏（9:16）视频做全屏背景，否则桌面端注定大幅裁切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
