未知容器尺寸下，如何用纯CSS实现图片焦点居中显示？

我从CMS获取多张带指定焦点的图片，希望用object-fit: cover属性显示，让给定的焦点尽可能靠近容器中心，且图片无空白区域。但容器尺寸是动态变化的，CSS里没法预先知晓，有没有不借助JavaScript尺寸观测器的纯CSS解决方案？

我尝试过直接计算object-position的百分比值（对应示例中红色边框的效果），但这不是理想结果——object-position的百分比是相对于容器的，导致图片焦点并没有真正居中。MDN文档对此有明确说明：

background-position: 25% 75%表示图片上距离左侧25%、顶部75%的点，会被放置在容器距离左侧25%、顶部75%的位置。

示例中用了一张640×960像素的图片，希望焦点落在月亮位置（坐标320,213像素）。红色边框的是直接计算百分比的效果，我想要的是绿色边框的效果。

现有尝试代码 #

CSS #

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.a img {
  object-position: 50% 22.19%;
}

.b img {
  /* 通过试错或容器尺寸计算得到的值 */
  object-position: 50% 8%;
}

.a, .b {
  border: 2px solid red;

  /* 实际场景中为动态未知尺寸 */
  width: 200px;
  height: 100px;
}

.b {
  border-color: green;
}

.flex {
  display: flex;
  gap: 10px;
}

HTML #

<div class="flex">
  <div class="a">
    <img src="https://images.pexels.com/photos/1785493/pexels-photo-1785493.jpeg?cs=srgb&dl=pexels-kasuma-1785493.jpg&fm=jpg&w=640&h=960">
  </div>
  <div class="b">
    <img src="https://images.pexels.com/photos/1785493/pexels-photo-1785493.jpeg?cs=srgb&dl=pexels-kasuma-1785493.jpg&fm=jpg&w=640&h=960">
  </div>
</div>

核心是用CSS变量存储图片原始尺寸和焦点坐标，结合calc()动态计算object-position，让焦点始终对齐容器中心，完全适配动态容器尺寸。

实现代码 #

CSS #

.flex {
  display: flex;
  gap: 10px;
}

.img-container {
  border: 2px solid green;
  width: 200px; /* 可任意修改为动态尺寸 */
  height: 100px; /* 可任意修改为动态尺寸 */
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 定义当前图片的原始尺寸和焦点坐标 */
  --img-width: 640;
  --img-height: 960;
  --focus-x: 320;
  --focus-y: 213;

  /* 计算图片与容器的宽高比 */
  --img-aspect: calc(var(--img-width) / var(--img-height));
  --container-aspect: calc(100% / 100%); /* 容器宽/容器高 */

  /* 计算cover模式下图片的实际显示尺寸 */
  --display-width: calc(max(var(--img-aspect), var(--container-aspect)) * 100%);
  --display-height: calc(max(1 / var(--img-aspect), 1 / var(--container-aspect)) * 100%);

  /* 计算焦点需要的偏移量，使其对齐容器中心 */
  --offset-x: calc((var(--focus-x) / var(--img-width)) * var(--display-width) - 50%);
  --offset-y: calc((var(--focus-y) / var(--img-height)) * var(--display-height) - 50%);

  /* 最终的object-position值 */
  object-position: calc(50% - var(--offset-x)) calc(50% - var(--offset-y));
}

HTML #

<div class="flex">
  <div class="img-container">
    <img src="https://images.pexels.com/photos/1785493/pexels-photo-1785493.jpeg?cs=srgb&dl=pexels-kasuma-1785493.jpg&fm=jpg&w=640&h=960">
  </div>
</div>

原理说明 #

1. 参数化存储：用CSS变量单独存储每张图片的原始尺寸和焦点坐标，方便批量配置；
2. 比例计算：通过对比图片和容器的宽高比，确定object-fit: cover模式下图片的实际显示尺寸；
3. 动态偏移：计算焦点在缩放后图片上的位置，通过偏移让其精准对齐容器中心；
4. 纯CSS适配：所有计算依赖CSS原生的calc()，无需JavaScript，容器尺寸变化时自动重新计算适配。

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