Flex容器跨浏览器表现不一致？网页图片自适应布局问题求助

问题描述 #

我正在制作一个网站，其中有一个固定宽度的内容区域，内部包含带有图片的flex容器。图片数量不固定（最多5张），要求每张图片的宽度自动计算以填满整个容器。

奇怪的是，该布局在FireFox中显示正常，但在Chrome或Yandex浏览器中出现异常：由于设置了height: 400px;，width: 100%会试图匹配图片的原始宽高比，导致图片无法自适应flex容器的空间。

代码示例 #

CSS代码 #

.article-images {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 20px;
  width: 100%
}

.article-images-item {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 2px;
  cursor: pointer
}

HTML代码 #

<div class="article-images">
  <img src="http://placehold.co/100x400" class="article-images-item" />
  <img src="http://placehold.co/100x400" class="article-images-item" />
  <img src="http://placehold.co/100x400" class="article-images-item" />
  <img src="http://placehold.co/100x400" class="article-images-item" />
</div>

效果对比 #

• 预期效果（FireFox中显示）：
  

• 异常效果（Chrome/Yandex中显示）：
  

解决方案 #

问题根源在于Chrome等浏览器中，flex项默认的min-width: auto会限制元素缩小到自身内容宽度以下，而图片作为替换元素，设置height:400px后会保留原始宽高比，导致width:100%无法生效。以下两种方法均可修复：

方法一：使用flex属性平分空间 #

修改CSS，去掉图片的width:100%，改用flex:1让每个图片项自动平分容器可用空间：

.article-images {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
}

.article-images-item {
  flex: 1; /* 自动分配剩余空间 */
  height: 400px;
  object-fit: cover;
  border-radius: 2px;
  cursor: pointer;
}

方法二：解除最小宽度限制 #

给图片添加min-width:0，允许其缩小到小于自身内容宽度：

.article-images {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
}

.article-images-item {
  width: 100%;
  min-width: 0; /* 关键：突破flex项最小宽度限制 */
  height: 400px;
  object-fit: cover;
  border-radius: 2px;
  cursor: pointer;
}

两种方法都能让图片在Chrome等浏览器中自适应flex容器，达到和FireFox一致的显示效果。

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