为什么CSS object-position百分比参数无法实现图片焦点居中

首先明确结论：这不是浏览器bug，属于预期行为，问题出在你对object-position属性的百分比规则理解有误。

object-position的真实对齐逻辑 #

object-position: x% y%的官方规则是：

• 图片自身距离左边缘x%的坐标点，和img容器距离左边缘x%的坐标点对齐
• 图片自身距离顶部y%的坐标点，和img容器距离顶部y%的坐标点对齐

你之前认为“设置70% 70%就会把图片上70% 70%的点放到容器中心”的认知是错误的，按照规则，你设置70% 70%时，品红色十字只会和img容器70% 70%的位置对齐，自然会偏离viewport中心。

实现需求的方案 #

方案1：严格将焦点固定在viewport中心

如果需要让原图上距离左a%、距离上b%的点，精确落在viewport中心，按如下公式计算object-position的值即可：

object-position: calc(50% / (a / 100)) calc(50% / (b / 100));

对应你的测试场景，十字位于70% 70%的位置，设置如下即可：

img.a {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  object-position: calc(50% / 0.7) calc(50% / 0.7);
  border: 5px solid red;
  margin: 0;
  padding: 0;
  display: block;
}

同时需要移除body的默认margin，避免容器偏移。

方案2：CMS常用的焦点优先保留方案

如果你不需要严格居中，只要确保裁剪时焦点区域始终在可视范围内（就是你提到的WordPress、Squarespace的实现逻辑，对应你举的手表裁剪示例），直接把编辑器中得到的焦点百分比赋值给object-position即可，这种逻辑下焦点不会被裁剪，且会尽可能在可视区域的核心位置，适配所有设备尺寸。

原有代码的优化建议 #

你同时给img设置了CSS的height: 100vh和HTML属性的width="100%" height="100%"，CSS尺寸优先级更高，不会影响属性生效，但建议统一在CSS中设置尺寸，避免出现样式冲突。

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