我懂你遇到的这个头疼问题——Firefox里加个min-height: 100%就能让图片至少撑满容器高度，但Chrome、Edge这些浏览器根本不吃这套，还是把图片缩得规规矩矩待在容器里。这其实是不同浏览器对flex子元素的渲染逻辑差异搞的鬼。

问题根源 #

在Chrome/Edge这类WebKit/Blink内核的浏览器中，flex容器里的图片默认带着flex-shrink: 1属性，意思是浏览器会自动缩小图片来适配容器尺寸，哪怕你设置了min-height: 100%，这个收缩规则也会优先生效。而Firefox的处理逻辑更贴合你的预期，它会优先尊重min-height的设置，不会随便把图片缩小。

跨浏览器解决方案 #

只需要给图片的样式加上flex-shrink: 0，阻止浏览器对图片进行收缩，同时保留min-height: 100%确保图片高度至少填满容器，再补个width: auto保证图片宽高比正常。修改后的完整代码如下：

.container {
  border: 2px solid red;
  width: 300px;
  height: 40vh;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.item {
  min-height: 100%;
  flex-shrink: 0; /* 核心：禁止flex容器缩小图片 */
  width: auto; /* 确保宽度按比例自适应 */
}

<div class="container">
  <img class="item" src="http://placekitten.com/1600/400" />
</div>
<div class="container">
  <img class="item" src="http://placekitten.com/600/1200" />
</div>

效果说明 #

• 对于宽比例的图片（比如第一张猫图）：图片高度会被拉到和容器高度一致，超出容器宽度的部分会被overflow: hidden裁剪，同时保持图片的宽高比不变。
• 对于高比例的图片（比如第二张猫图）：因为本身高度就大于容器，所以会保持原有比例居中显示，超出容器的上下部分被裁剪。

这样修改后，Chrome、Edge和Firefox的表现就完全一致了。

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