如何让图片在自适应Div中保持比例并裁剪（支持焦点定位）

一、实现图片按比例裁剪、居中并添加5px出血（bleed） #

要达成你的需求，需调整核心样式属性，修正原有代码的几个关键问题：

1. 替换object-fit: contain为object-fit: cover——该属性会让图片按比例缩放、填满容器，超出部分自动裁剪
2. 通过「放大图片+负外边距」实现5px出血：让图片比容器大10px（上下左右各延伸5px），再用负外边距偏移，依靠容器的overflow: hidden裁剪超出区域

修改后的完整代码如下：

HTML #

<body>
  <div class="image-container">
    <img src="https://euclois.xyz/desert-statue.jpg" alt="沙漠雕像">
  </div>

  <style type="text/css">
    html,
    body {
      margin: 0;
      height: 100%;
      overflow: hidden;
    }

    body {
      background: white;
      display: flex;
      height: 100vh;
    }

    .image-container {
      width: calc(100% - 50px);
      height: calc(100% - 50px);
      background: #f0e8e6;
      overflow: hidden;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    img {
      width: calc(100% + 10px);
      height: calc(100% + 10px);
      object-fit: cover;
      object-position: center;
      margin: -5px;
    }
  </style>
</body>

关键属性说明 #

• object-fit: cover：强制图片按原始比例缩放，完全填满容器，超出容器的部分自动裁剪
• width: calc(100% + 10px) + height: calc(100% + 10px)：让图片尺寸比容器大10px，预留出上下左右各5px的出血范围
• margin: -5px：将图片向四个方向各偏移5px，使出血部分延伸到容器外，最终被容器的overflow: hidden裁剪
• object-position: center：确保图片在容器内居中对齐

二、设置自定义焦点，让指定区域始终居中 #

如果需要让图片中某个特定区域（比如雕像的脸部）在容器尺寸变化时始终保持居中，只需调整object-position属性即可。该属性接受百分比、像素或关键字值，格式为X轴位置 Y轴位置：

例如，想让图片中水平30%、垂直40%的位置保持在容器中心，修改img的样式：

img {
  /* 其他属性不变 */
  object-position: 30% 40%;
}

你可以根据实际图片的焦点位置调整百分比数值，确保目标区域始终处于容器视觉中心。

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