如何实现：图片适配容器时原样显示，超出时用object-fit: cover？

纯CSS近似方案 #

如果不需要严格让大图填满容器，仅要求大图不超出240px高度和容器100%宽度，小图保持原尺寸，可以用以下代码：

img {
  max-width: 100%;
  max-height: 240px;
  display: block;
  margin: 0 auto; /* 可选，让小图在容器内居中 */
}

这个方案的局限是：当图片宽高比和容器（100%宽、240px高）不匹配时，大图会保持原比例缩小，不会填满容器，只会占据容器的一部分区域。

纯CSS精准方案 #

如果要实现大图填满容器并裁剪、小图保持原尺寸居中的效果，可以借助容器配合object-fit属性：

.image-wrapper {
  width: 100%;
  height: 240px;
  position: relative;
  overflow: hidden;
}

.image-wrapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 240px;
  object-fit: cover;
}

这个方案中，小图会以原尺寸居中显示；大图会被缩放并裁剪，刚好填满240px高、100%宽的容器区域。

JavaScript精准方案 #

如果纯CSS无法完全贴合需求，用JS判断图片的自然尺寸后动态设置样式：

// 遍历所有目标图片
document.querySelectorAll('.target-image').forEach(img => {
  // 图片加载完成后获取自然尺寸
  img.onload = function() {
    const containerWidth = img.parentElement.offsetWidth;
    const naturalWidth = this.naturalWidth;
    const naturalHeight = this.naturalHeight;

    // 判断图片是否能适配容器最大尺寸：宽度≤容器宽 且 高度≤240px
    const fitsContainer = naturalWidth <= containerWidth && naturalHeight <= 240;

    if (!fitsContainer) {
      this.style.width = '100%';
      this.style.height = '240px';
      this.style.objectFit = 'cover';
    } else {
      // 保持图片原尺寸
      this.style.width = 'auto';
      this.style.height = 'auto';
      this.style.objectFit = 'unset';
    }
  };

  // 处理已缓存的图片，手动触发加载完成逻辑
  if (img.complete) {
    img.onload();
  }
});

对应的HTML结构示例：

<div class="image-container">
  <img src="远程图片地址" class="target-image" alt="图片描述">
</div>

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