如何调整CSS中object-fit: cover的图片显示区域，避免焦点被裁剪？

当你使用object-fit: cover时，浏览器会自动缩放并裁剪图片以填满容器，但默认的居中对齐可能会把你需要的焦点区域（比如示例中的“0”）裁掉。这种情况完全可以用CSS解决，核心是使用object-position属性调整图片在容器内的对齐位置。

具体解决方案 #

object-position属性可以控制图片在容器中的定位，支持关键字、百分比或长度值：

• 针对你示例中焦点在底部中心的情况，直接设置：

img {
  object-fit: cover;
  object-position: center bottom; /* 将图片底部中心与容器对齐 */
}

• 你也可以用百分比值实现同样效果：object-position: 50% 100%;（50%对应水平居中，100%对应垂直底部）
• 如果需要更精细的调整，还能使用像素等长度单位，比如object-position: 10px 80%;，根据实际需求微调即可。

这个属性会让object-fit: cover在保持图片比例填充容器的同时，优先显示你指定的区域，避免焦点被裁剪。

内容的提问来源于stack exchange，提问作者Some09kid