如何使用纯CSS实现：图片宽度大于自身高度时填满div宽度，高度大于自身宽度时填满div高度且不扩展图片盒模型

完全没问题，你想要的「根据图片自身宽高比自动适配容器，竖图填高度、横图填宽度且不超出容器盒模型」的效果，纯CSS就能轻松搞定，下面给你两种贴合需求的方案：

方案一：让图片盒模型自适应（不强制占满容器） #

这种方案下，图片的实际盒模型会根据自身比例缩放，绝不会超出容器范围，同时自动贴合容器的对应边：

.img-container{ 
  height: 15rem; 
  width: 15rem;
  /* 可选：如果需要图片在容器内居中，加上这三行 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-container img{ 
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

原理说明： #

• max-width: 100% 和 max-height: 100% 从根源限制图片的最大尺寸，确保不会撑破容器
• width: auto 和 height: auto 让图片严格保持自身宽高比自动缩放，竖图会自动填满容器高度，横图则填满容器宽度
• 容器的flex布局是可选的，用来让图片在容器内居中显示，不需要的话可以直接去掉

方案二：让图片盒模型占满容器，内容按比例适配 #

如果你希望图片的盒模型完全占满容器，但显示的图片内容保持比例且不溢出，那可以调整object-fit的使用逻辑（你的现有代码已经接近，只需补全细节）：

.img-container{ 
  height: 15rem; 
  width: 15rem;
  overflow: hidden; /* 确保图片内容不会意外溢出容器（可选） */
}

.img-container img{ 
  height: 100%; 
  width: 100%; 
  object-fit: contain;
  /* 可选：控制图片在容器内的位置，默认就是居中 */
  object-position: center;
}

原理说明： #

• width: 100% 和 height: 100% 让图片的盒模型完全占满容器空间
• object-fit: contain 确保图片内容保持原比例完整显示：竖图会自动填满容器高度，横图填满容器宽度，绝不会出现拉伸变形
• object-position 可以灵活调整图片在容器内的显示位置，默认值就是居中，无需额外设置

两种方案都能精准满足你的需求，你可以根据实际场景选择：如果需要图片盒模型随内容大小变化，选方案一；如果需要图片盒模型固定占满容器，选方案二。

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