object-fit: cover 默认不居中是因为 object-position 默认值为0 0，需显式设置 object-position: center center 才生效；单独声明无效，且父容器须有明确宽高和 overflow: hidden。
object-fit: cover 为什么图片不居中？
直接写 object-fit: cover 后人脸常被切掉，不是属性失效，而是它默认从左上角开始裁剪——object-position 默认值是 0 0，不是视觉中心。
必须显式声明 object-position: center center，这个属性只有和 object-fit 同时存在才生效；单独写会被浏览器忽略。
-
object-fit: cover; object-position: top center可突出上半身（适合人像主图） -
object-position支持像素、百分比、关键词，如20% 30%或right 10px - 关键帧位置不同，
top center在某些视频里反而切掉额头，需在真实设备上预览关键帧
用 absolute 定位比 transform 更稳
别用 transform: translate(-50%, -50%) 居中 video 或 img：它依赖元素当前宽高计算偏移，而视频加载中、横竖屏切换、或未设 width/height 时，尺寸可能为 0，导致定位漂移甚至消失。
更可靠的做法是父容器设 position: relative，子元素用 position: absolute; inset: 0 钉死四边，再靠 object-fit 在内部做缩放裁剪——逻辑解耦，响应性更强。
- 确保父容器没有
overflow: hidden，否则裁剪部分被截断，看起来像没生效 - 避免给
video或img设width: 100%; height: 100%，会干扰object-fit的自然行为 -
inset: 0是top: 0; right: 0; bottom: 0; left: 0的简写，更简洁且兼容性一致
全屏背景要不要加 position: fixed？
加 position: fixed 会让视频或图片始终固定在视口，不随页面滚动——适合首屏沉浸式大图，但若页面有长内容，用户一滚动，背景就没了，下方区域失去视觉支撑。
更通用的做法是用 position: absolute + 父容器设 min-height: 100vh，这样既撑满首屏，又随内容自然延展。
- 如果真要用
fixed，记得给后续内容加padding-top: 100vh避免文字被遮挡 -
fixed元素脱离文档流，在 iOS Safari 中可能触发渲染 bug，比如横屏后高度错乱 - 用
background-image+background-size: cover是替代方案，但语义弱、无法设置 poster、不支持 video
父容器的 overflow 和尺寸定义容易被忽略
很多人卡在“明明写了 cover 和 center center，还是不对”，八成是父容器没设明确尺寸，或加了 overflow: hidden 却没意识到它会截断 absolute 子元素的溢出部分。
object-fit 不改变元素盒模型尺寸，只控制内容在内容框内的呈现方式。如果父容器宽高未定义（比如仅靠内容撑开），cover 就无从“覆盖”起。
- 父容器至少要设
width和height，或min-height: 100vh+width: 100% -
overflow: hidden在父容器上是必要的（防止裁剪内容溢出），但不能加在中间层容器上，尤其当它不是直接父级时 - 移动端 Safari 对
object-fit的支持没问题，但对object-position百分比值偶尔有解析延迟，建议加will-change: object-position微调
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
