object-position必须配合object-fit（尤其是cover）才生效，单独使用无效；需容器设宽高，且仅作用于img、video等替换元素，不适用于背景图。
为什么写了object-position却没反应？
因为object-position本身不生效，它必须和object-fit配合使用。单独设置object-position: 50% 20%对默认的<img>完全无效——浏览器直接忽略，也不报错。
- 容器没设明确宽高（
width和height或aspect-ratio），图片按自然尺寸渲染，object-position无参照系 - 用了
object-fit: fill（默认行为），图片已被强制拉伸变形，再偏移也看不出变化 - 用了
object-fit: contain但图片完全在框内，object-position只能微调留白分布，视觉上不明显
object-position必须搭配object-fit: cover才实用
这是最常见、最有价值的组合：用cover强制等比缩放并裁剪填满容器，再用object-position决定裁掉哪部分、留下哪部分。
-
object-position: 50% 20%→ 把图像垂直中心往上提，适合人像露出脸部 -
object-position: right bottom→ 图像右下角对齐容器右下角 -
object-position: calc(100% - 20px) calc(100% - 10px)→ 距右下角 20px × 10px 的位置对齐 - 第一个值是水平方向（x），第二个是垂直方向（y）；省略第二个时，默认为
50%
别把它和background-position混用
object-position只作用于可替换元素（<img>、<video></video>），对background-image完全无效。写object-position在带背景图的div上，CSS 会静默忽略。
- 要调背景图中心？用
background-position: center，不是object-position - 要保留
alt、支持loading="lazy"、适配srcset？必须用<img>+object-fit+object-position - 两者语法相似（都支持
center top、20% 50%），但底层机制完全不同：object-position移动的是实际图像内容坐标，影响可访问性和交互热区
移动端和兼容性容易被忽略的细节
object-fit和object-position在 Chrome 31+、Firefox 36+、Safari 7.1+、Edge 19+ 支持良好，但 IE 完全不支持。
- iOS Safari 或某些安卓 WebView 中，当图像宽高比与容器差异极大，或同时用了
transform: scale()时，object-position可能出现定位漂移 - 容器加
padding不影响object-position逻辑——它的偏移基准是内容盒（content box），不是 padding 区 - 调试时建议临时加个
border或outline确认是图像内容偏移了，还是容器本身位置异常
真正起效的前提就一个：容器有宽高 + object-fit设为cover或contain。漏掉object-fit，object-position就是纯摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
