object-position 必须与 object-fit: cover 配合才生效，其百分比值以图片原始尺寸为基准，0% 0% 表示图片左上角对齐容器左上角，50% 50% 为默认居中，常用于人脸定位如 50% 20%。
object-position 必须和 object-fit: cover 配合才有效
单独写 object-position 没任何效果，浏览器直接忽略，也不报错。它不是独立定位属性，而是「裁剪后内容的锚点偏移」——前提得先触发裁剪逻辑。
最可靠组合是：object-fit: cover + object-position。前者强制等比缩放并填满容器，后者决定哪一块被保留在视口内。
-
object-fit: fill下object-position无效：图片已拉伸变形，无“裁剪区域”可偏移 -
object-fit: contain下能用，但效果微弱——图片完整可见，object-position只影响留白分布，视觉不明显 -
object-fit: none或未设object-fit：属性完全不生效
百分比值怎么算？0% 和 100% 的参照系是什么
object-position: 75% 20% 不是指“往右移 75% 容器宽度”，而是：把图片自身横向 75% 处（即从左往右数 75% 的位置）对齐到容器左边缘；把图片自身纵向 20% 处对齐到容器上边缘。
换句话说，百分比基准是图片原始尺寸，不是容器。所以：
立即学习“前端免费学习笔记（深入）”；
Kibana Saved Objects
下载
通过 REST API 管理 Kibana 保存的对象（仪表板、Lens 可视化等）。适用于：① 以编程方式创建、更新、删除仪表板和 Lens 可视化。
-
0% 0%= 图片左上角贴容器左上角 -
100% 100%= 图片右下角贴容器右下角 -
50% 50%= 图片中心点对齐容器中心点（默认值） - 想让人脸始终露出？试试
object-position: 50% 20%，把垂直方向 20% 处（通常是额头/眼睛区域）对齐容器顶部
为什么加了还是没变化？常见失效场景
最常踩的坑不是语法错，而是上下文缺失：
- 容器没设明确宽高：
width和height都得有，或至少用aspect-ratio固定比例；只写width: 100%但高度由内容撑开 →cover算不出裁剪边界 - 父元素
overflow: visible（尤其表格单元格）：必须加overflow: hidden，否则裁剪会被撑出 - 混用
transform：iOS Safari 和部分安卓 WebView 中，transform: scale()或translate()会干扰object-position计算，导致焦点漂移 - IE 或旧版 Safari：完全不支持，连 polyfill 也只模拟
cover，不支持object-position百分比
响应式场景下该用 px 还是 %？
优先用百分比。像素值在断点切换时极易错位——比如桌面端设 object-position: 30px 20px，到了手机屏，图片缩放比例变了，30px 就不再对应同一视觉区域。
百分比能随图片缩放比例自适应，更稳定。如果非要用像素，建议配合 CSS 自定义属性动态注入：
img {
object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}
再用 JS 根据设备或用户操作更新 --focus-x，比硬编码 px 更可控。
真正容易被忽略的是：object-position 的偏移基准永远是图片原始尺寸，不是渲染后尺寸。调试时临时加 outline: 1px solid red 到 img，确认动的是图像内容本身，而不是整个容器跑偏了。
