object-position 必须与 object-fit: cover 或 contain 配合使用才生效，且容器需有明确宽高；其百分比值基于原图尺寸，用于指定原图关键点对齐容器中心的位置。
object-position 必须和 object-fit: cover 一起用才生效
单独写 object-position: center 在 <img> 上完全没反应，不是浏览器问题，是 CSS 规范要求——object-position 只在启用了「对象定位机制」时起作用，而该机制只由 object-fit: cover 或 object-fit: contain 触发。object-fit: fill 和 object-fit: none 不行，object-fit 缺失更不行。
常见错误现象：object-position: 20% 30% 写了但图片还是从左上角开始裁，控制台零报错，容易反复检查拼写。
- 必须显式声明
object-fit: cover（最常用）或object-fit: contain - 容器需有明确宽高，比如
width: 300px; height: 200px，仅width: 100%+ 无高度会导致裁剪失效 -
display: block建议加上，避免<img>默认 inline 行内行为导致底部留白干扰视觉判断
怎么让脸部/主体始终居中显示
默认 object-position: center 是 50% 50%，即原图中心对齐容器中心。但人像常偏上，风景常偏下，这时要手动偏移原图的“关键点”去对齐容器中心。
例如：一张 1200×800 的人像，脸部在原图垂直方向约 30% 处（额头到下巴占上半部分），想让它出现在容器正中，就设 object-position: center 30%——意思是“把原图纵向 30% 的那条线，对齐到容器纵向中心线”。
立即学习“前端免费学习笔记（深入）”；
-
object-position: center top等价于50% 0%，适合顶部构图（如天空留白多的风景） -
object-position: center bottom等价于50% 100%，适合人像脚部或地面需保留的场景 - 用像素值也合法：
object-position: -120px 40px，负值向左/上，正值向右/下
调试时怎么确认是图片内容在动，而不是容器错了
容易误判：以为 object-position 没生效，其实是容器本身位置偏了，或者父元素有 padding/margin 干扰了视觉中心。
最直接的验证方式是给 <img> 加个轮廓：outline: 1px solid red，再对比容器边框（可用 border 或 box-shadow 标出）。如果红边框不动、里面图片内容左右滑动，说明 object-position 正常工作；如果整个红框跟着偏，那就是定位逻辑写在了父容器或其它地方。
- 不要依赖开发者工具里“Computed”面板查
object-position是否被计算——它可能显示已解析，但因缺object-fit被静默忽略 - 移动端 Safari 对极端宽高比（如 16:9 图进 1:1 容器）偶有偏移漂移，可加
will-change: transform缓解 - IE 全系不支持，若需兼容，得降级为
background-image+background-position方案
和 background-position 看似一样，但不能混用
语法都是 x y，但语义和影响完全不同：background-position 移的是背景图层，object-position 移的是真实 <img> 的渲染内容坐标。
这意味着：用 object-position 时，alt 文本有效、srcset 响应式切换正常、伪元素能叠加在图像上、屏幕阅读器能正确聚焦——而 background-image 这些全丢。
- 需要 SEO、可访问性、懒加载、右键保存？只能选
<img>+object-fit+object-position - 想 hover 放大图片？
transform: scale()直接作用于<img>更轻量，不用额外套<div> - 动画支持有限：Chrome 79+、Firefox 73+ 支持
transition，但旧版 Safari 动画可能闪烁，慎用于关键交互动效
真正容易被忽略的点是：object-position 的百分比，永远相对于「原图自身尺寸」，不是容器，也不是视口。你调的不是“容器里图片往哪挪”，而是“原图的哪个坐标点，去对齐容器中心”。这个参照系一旦理解错，所有偏移值都会偏差。
