如何设置图片max-width/max-height为100%且允许超自身尺寸适配父容器？

嘿，这个问题我太熟了！之前做响应式图片组件的时候跟你遇到了一模一样的困境——默认的max-width:100%; max-height:100%逻辑是只缩不放：图片比容器大时会按比例缩小，但容器比图片大时，图片只会停留在原尺寸，根本撑不到容器边缘。要实现你要的「不管原图大小，都优先以宽度/高度的100%适配（先达到的为准），同时保持宽高比」，得换个思路。

核心解决方案：用object-fit实现可缩可放的比例适配 #

现代浏览器里，object-fit属性完美解决这个问题，步骤超简单：

1. 给父容器设置明确的尺寸约束 #

首先得确保图片的父容器有清晰的宽高限制——可以是固定的width/height，也可以是flex/grid布局里的占比（比如flex子项的flex-basis，grid轨道的fr单位）。举个例子：

.image-wrapper {
  /* 固定尺寸示例 */
  width: 350px;
  height: 250px;
  border: 1px solid #eee;
  /* 如果是flex布局，也可以这样：
  flex: 1;
  min-width: 200px;
  */
}

2. 给图片设置关键样式 #

只需要3行CSS，就能实现你要的效果：

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

• width:100%; height:100%：让图片的盒模型完全占满父容器的空间
• object-fit:contain：让图片保持原有宽高比，缩放至刚好填满容器的某一边（宽度或高度先达到100%的那个），同时完整显示整个图片，不会裁剪

这样不管原图是比容器大还是小，都会自动缩放至适配容器：

• 原图比容器大：按比例缩小到刚好能放进容器
• 原图比容器小：按比例放大到刚好填满容器的一边（另一边不超出）

浏览器兼容性 #

object-fit的兼容性非常好：Chrome 31+、Firefox 36+、Safari 10.1+、Edge 16+都支持，基本覆盖了所有现代浏览器。如果你的项目还要兼容IE（现在很少见了），可以用背景图替代方案：

.image-wrapper {
  width: 350px;
  height: 250px;
  background-image: url('your-image-url.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

这个方案效果完全一致，但缺点是失去了<img>标签的语义化（比如alt属性对无障碍的支持），所以优先推荐object-fit方案。

关于你提到的Flexbox方案 #

其实Flexbox可以和上面的方案结合使用，比如要让图片在容器中居中显示，只需要给父容器加两行：

.image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 原有尺寸样式 */
  width: 350px;
  height: 250px;
}

然后图片还是用object-fit:contain的样式，这样图片会在Flex容器中居中，同时保持比例适配容器尺寸。

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