通过设置 object-position 属性可以调整图片在容器内的对齐焦点，从而改变缩放裁切后的显示区域。该属性接受 <position></position> 值（如 center、top left）或带单位的偏移量，配合 object-fit 使用，决定当图片尺寸与容器不一致时，保留图片的哪一部分作为可视内容。
object-position 支持哪些定位方式
它支持关键字、百分比和长度单位三种方式。关键字包括 left、right、top、bottom、center 及其组合；百分比以容器内边距盒为基准计算偏移；长度单位则直接指定像素等绝对距离。默认值为 50% 50%，即居中。
img {
width: 300px;
height: 200px;
object-fit: cover;
object-position: center top;
}
上述代码将图片顶部中心对齐到容器顶部中心，若图片高于容器，则上下裁剪；若宽于容器，则左右裁剪，但始终保证顶部中心可见。
立即学习“前端免费学习笔记（深入）”；
如何结合 object-fit 实现不同裁切效果
object-fit 决定图片如何填充容器，而 object-position 决定在填充过程中“看哪里”。例如 cover 会保持比例填满容器并可能裁剪，此时 object-position 控制保留区域；contain 则完整显示图片并在空白处留白，object-position 在此场景下无视觉影响，因为图片未被裁切。
/* 示例：聚焦人物面部 */
.face-crop {
object-fit: cover;
object-position: 60% 40%; /* 向右下偏移，聚焦右上区域 */
}
当使用 cover 且图片比例与容器差异大时，object-position 的偏移能精准控制裁切边界，避免关键内容被切除。
负值偏移是否有效及适用场景
是的，object-position 允许负值。负值表示向相反方向偏移，例如 object-position: -10px -10px 会使图片向左上移动10像素，相当于让容器的右下部分更多显示图片内容。这在需要微调构图或适配非对称布局时非常有用。
