如何用max-width和max-height实现图片适配父容器且无间隙？

纯CSS方案（推荐） #

核心思路是让容器尺寸自适应图片的缩放后尺寸，同时限制图片的最大高度和宽度，避免拉伸或裁剪，也不会出现多余间隙。

修改你的SCSS代码如下：

.msg-image {
  display: inline-flex; /* 让容器自动包裹缩放后的图片 */
  max-width: 100%;
  max-height: 300px;
  border: 1px solid;
  border-radius: 8px;

  img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: top; /* 消除图片底部的基线间隙 */
  }
}

原理说明：

1. display: inline-flex 让容器的宽度和高度完全由内部图片的尺寸决定，不会强制固定尺寸导致间隙。
2. 给图片设置 max-width: 100% 和 max-height: 100%，会让图片按自身比例缩放，直到触碰到容器的 max-width 或 max-height 限制，完全不会裁剪。
3. vertical-align: top 解决了图片作为行内元素时底部默认的基线间隙问题。

如果需要让容器块级显示（占满父容器宽度），可以把 inline-flex 换成 flex，同时给图片添加 margin: auto 实现居中：

.msg-image {
  display: flex;
  justify-content: center;
  max-width: 100%;
  max-height: 300px;
  border: 1px solid;
  border-radius: 8px;

  img {
    max-width: 100%;
    max-height: 100%;
  }
}

JS备选方案（仅当CSS无法满足特殊场景时使用） #

如果需要更精细的控制，比如动态调整容器尺寸匹配图片比例，可以通过JS计算图片的宽高比，然后设置容器的最大尺寸：

document.querySelectorAll('.msg-image img').forEach(img => {
  // 确保图片加载完成后计算
  img.onload = function() {
    const container = img.parentElement;
    const ratio = this.width / this.height;
    const maxHeight = 300;
    let newWidth, newHeight;

    if (this.height > maxHeight) {
      newHeight = maxHeight;
      newWidth = maxHeight * ratio;
    } else {
      newHeight = this.height;
      newWidth = this.width;
    }

    // 确保宽度不超过父容器100%
    const parentMaxWidth = container.parentElement.clientWidth;
    if (newWidth > parentMaxWidth) {
      newWidth = parentMaxWidth;
      newHeight = newWidth / ratio;
    }

    container.style.width = `${newWidth}px`;
    container.style.height = `${newHeight}px`;
  }

  // 如果图片已经缓存，手动触发onload
  if (img.complete) img.onload();
});

对应的CSS可以简化为：

.msg-image {
  border: 1px solid;
  border-radius: 8px;
  overflow: hidden; /* 可选，防止极端情况溢出 */
  img {
    width: 100%;
    height: 100%;
  }
}

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