如何用object-position结合CSS变量将图片焦点对齐正方形容器中心

要实现让图片焦点尽可能贴近正方形容器中心，同时保持object-fit: cover无留白的效果，可以通过calc()结合自定义变量推导object-position的取值，核心逻辑根据图片宽高比（--aspect）的差异分别处理：

核心逻辑 #

当图片宽高比与正方形容器不同时，object-fit: cover会裁剪超出容器的部分：

• 图片宽>高（--aspect > 1）：图片被缩放至高度填满容器，宽度超出，此时仅需调整水平偏移让焦点对齐容器中心，垂直方向因无多余空间不会影响显示。
• 图片高>宽（--aspect < 1）：图片被缩放至宽度填满容器，高度超出，此时仅需调整垂直偏移让焦点对齐容器中心，水平方向因无多余空间不会影响显示。
• 图片为正方形（--aspect = 1）：图片刚好填满容器，直接使用焦点的百分比位置即可。

最终CSS代码 #

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 通用偏移公式 */
  object-position: 
    calc(50% - (var(--fx) * var(--aspect))%) 
    calc(50% - (var(--fy) / var(--aspect))%);
}

/* 单独处理正方形图片的情况 */
img[style*="--aspect: 1"] {
  object-position: var(--fx)% var(--fy)%;
}

公式验证 #

• 宽图示例（--fx:30; --aspect:2）：水平偏移计算为calc(50% - 30*2%) = -10%，图片的30%水平位置会刚好对齐容器中心（50%位置）。
• 高图示例（--fy:70; --aspect:0.66）：垂直偏移计算为calc(50% - 70/0.66%) ≈ -55%，图片的70%垂直位置会贴近容器中心。

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