object-fit 在 position: absolute 的视频上不生效，是因为其依赖明确的渲染尺寸，而绝对定位未设宽高时尺寸不可计算；需显式设置 width/height 100% 并确保父容器有约束。
为什么 object-fit 在 position: absolute 的视频上不生效？
因为 object-fit 只对「替换元素」（如 ）在「其内容盒（content box）内」起作用，而当 被设为 position: absolute 且未显式设置宽高时，它的尺寸由父容器的 inset 或 top/right/bottom/left 决定——此时若父容器没有 overflow: hidden 或尺寸约束，视频可能溢出或拉伸失真，object-fit 就像没穿鞋走路，有心无力。
关键前提：必须让 的「渲染尺寸」明确可计算，否则 object-fit: cover 无法知道“要 cover 到多大”。
实操建议：
- 给
显式设置width: 100%; height: 100%（配合position: absolute和四边0），再加object-fit: cover - 确保其父容器（通常是相对定位的 wrapper）有明确高度，比如
min-height: 100vh，且overflow: hidden防止滚动条干扰 - 移除
默认的display: inline行为，设为display: block，避免底部留白
如何让全屏视频背景始终居中并裁剪适配不同屏幕？
核心是两层控制：外层用 position: absolute 锚定位置，内层用 object-fit 控制内容填充方式。只靠 object-fit 不行，它不移动视频帧；只靠 transform: translate(-50%, -50%) 也不行，会破坏响应性。
推荐结构与样式：
<div class="video-bg"> <video autoplay muted loop><source src="bg.mp4" type="video/mp4"></source></video> </div>
对应 CSS：
.video-bg {
position: relative;
min-height: 100vh;
overflow: hidden;
}
.video-bg video {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
z-index: -1;
}
注意：z-index: -1 是为了不影响页面其他内容层级，但需确保父容器不是 transform 或 will-change 触发的新层叠上下文，否则可能被截断。
object-fit: cover vs contain 在全屏视频中的实际差异
两者都依赖视频原始宽高比，但裁剪逻辑完全不同：
-
object-fit: cover—— 等比缩放填满容器，**溢出部分被裁剪**，适合强调视觉冲击，但可能切掉人脸或关键区域 -
object-fit: contain—— 等比缩放完整显示全部画面，**留黑边**，适合需要保留所有信息的场景（比如教学视频背景）
常见误判点：
- 以为
cover总是“更好看”，其实横屏视频在窄屏手机上用cover很容易把人物头脚全切掉 - 用
contain时忘了给父容器设background-color，黑边在浅色主题下特别突兀 - 没配合
object-position微调焦点，比如object-position: center 20%把构图重心往上提，适配移动端常看的区域
移动端 Safari 下视频不自动播放、不铺满的兼容处理
iOS Safari 对 限制极严：不加 muted 无法自动播放；某些版本中 object-fit 在 position: absolute 下失效；还有视口缩放导致 100vh 计算错误的问题。
必须加的补丁：
- 确保
同时带autoplay、muted、playsinline属性（后者防止全屏跳转） - 用
min-height: 100%;+height: 100vh;替代单纯min-height: 100vh，规避 iOS 地址栏收起时vh动态变化导致的空白 - 对 iOS 加一段 JS 检测并强制触发播放（仅首次）：
video.play().catch(e => console.log("Autoplay prevented")) - 避免在
上设border-radius或filter，Safari 渲染这些属性时可能破坏object-fit布局
最易被忽略的一点：iOS 上 position: absolute 的 若父容器用了 transform（哪怕只是 translateZ(0)），object-fit 就会彻底失效——这个坑没有报错，只有黑屏或拉伸，得靠真机调试才能发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
