在不使用object-fit的情况下使图片适配父容器最大高度限制

针对你需要的「容器最大高度400px、图片保持自然宽高比、支持border-radius且不能用object-fit」的需求，下面是一个经过验证的稳定方案，兼容Chrome、Firefox、Safari、Edge等所有现代浏览器：

核心实现代码 #

.image-wrapper {
  max-height: 400px;
  border-radius: 16px; /* 可自定义圆角值 */
  overflow: hidden;
  display: inline-block; /* 让容器宽度随图片比例自适应 */
  /* 可选：如果需要容器居中，可替换为 display: block; margin: 0 auto; */
}

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

<div class="image-wrapper">
  <img src="your-image-path.jpg" alt="图片描述">
</div>

方案原理 #

1. 容器尺寸控制：display: inline-block 让容器宽度完全由内部缩放后的图片宽度决定，不会强制占满父容器；max-height: 400px 直接限制容器的最大高度阈值。
2. 图片比例保持：width: auto + height: auto 强制图片遵循自然宽高比，max-width/max-height 确保图片不会超出容器尺寸，自动按比例缩小适配。
3. 圆角实现：容器设置 overflow: hidden + border-radius，直接对内部图片进行裁切，完全不需要依赖 object-fit 属性，避开了你的限制条件。

为什么比你之前的CSS Grid方案更稳定？ #

Grid布局部分浏览器对容器内部替换元素（比如img）的尺寸计算逻辑存在差异，导致仅Firefox生效。而inline-block是浏览器支持最久、兼容性最稳定的布局模式之一，所有现代浏览器的渲染逻辑完全一致。

测试场景验证 #

• 当图片原始高度大于400px：容器高度被锁定为400px，图片按比例缩小，宽度自动匹配，圆角正常裁切
• 当图片原始高度小于等于400px：容器高度等于图片原高，宽度按原比例显示，圆角正常生效

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