object-position不能直接用于<img>是因为它仅对启用对象定位机制的可替换元素生效，必须配合object-fit（如fill或cover）显式声明才能生效。
object-position 为什么不能直接用在 <img> 上
很多人试过给 <img> 元素加 object-position 却没效果，是因为该属性只对「可替换元素」且启用了「对象定位机制」的元素生效——而 <img> 默认不触发该机制，必须配合 object-fit 使用（哪怕设为 object-fit: fill 这种无视觉变化的值）。
常见错误现象：object-position: 20px 30px 写在 <img> 上完全没反应，控制台也无报错，容易误以为是浏览器不支持。
-
object-fit必须显式声明（哪怕只是fill或none），否则object-position被忽略 - 不支持 IE，Edge 16+、Chrome 32+、Firefox 36+ 开始支持
- 值单位可以是
px、%、em，但百分比是相对于容器宽高的偏移，不是图片自身
用 object-position 实现图片局部裁剪居中
典型场景：一张高宽比固定的容器（如 400px × 300px），要显示原图中「人脸区域」而非默认左上角。这时不用 JS 计算裁剪，纯 CSS 就能解决。
假设原图尺寸为 1200px × 800px，想让其中心点（600px, 400px）对齐到容器中心（200px, 150px），那么偏移量就是：200 − 600 = −400px 水平，150 − 400 = −250px 垂直。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
<div style="width: 400px; height: 300px; overflow: hidden;">
<img src="photo.jpg"
style="width: 100%; height: 100%; object-fit: cover; object-position: -400px -250px;">
</div>
-
object-fit: cover保证填满且不拉伸，是启用object-position的前提之一 - 负值合法，表示往左/往上偏移图片内容
- 如果容器有
overflow: hidden，超出部分会被裁掉，实现“可视窗口”效果
和 background-position 的关键区别在哪
看起来都调位置，但底层逻辑完全不同：background-position 移动的是背景图层，而 object-position 移动的是「替换内容本身」，会影响所有依赖内容坐标的特性（比如 <picture> 中的响应式源选择、无障碍读取的图像焦点等）。
-
background-position可以作用于任意块级元素，object-position只能用于<img>、<video>、<object>等可替换元素 - 当图片是响应式（
srcset+sizes）时，object-position始终基于最终选中的图片尺寸计算，background-image则无法响应式切换源 - 若需动画移动位置，
object-position支持 CSS transition（Chrome 79+、Firefox 73+），但部分旧版本可能闪烁
移动端 Safari 的兼容细节和 fallback 方案
iOS 12.2+ 才开始支持 object-position，iOS 12.1 及更早版本会静默忽略该声明。如果你的用户仍有相当比例使用老 iOS，需要降级处理。
- 检测方式：用 JS 判断
'objectPosition' in document.documentElement.style - 简单 fallback：改用
background-image+background-position，但需把图片转成 base64 或额外请求一次（因为<img>的src无法被 CSS 复用） - 注意 Safari 对
object-fit: cover在 flex 容器中的渲染 bug（iOS 13.3 之前），建议外层加min-width: 0或用display: block避免收缩
真正麻烦的不是语法，而是当你用 object-position 调好一张图的位置后，换一张不同宽高比的图，偏移值就得重算——它不抽象，也不自动，得把图片尺寸关系理清楚才能稳住。
