设置flex-shrink:1后flex容器内图片未按相同比例缩放问题求助

问题原因 #

flex 布局中，flex 项的默认 min-width 属性值为 auto，会被元素的原始内容最小宽度限制，无法压缩到小于内容本身的宽度。你设置的 flex-shrink:1 仅允许元素在内容最小宽度以上的范围缩放，而第二张图片原始宽度最小，因此窗口缩小时它会先被压缩，其余图片还没达到自身原始宽度的压缩阈值，所以看起来宽度不变。

修复方案 #

给 .slider img 选择器添加 min-width: 0 打破默认内容宽度限制，同时显式设置 flex-basis: 200px 统一所有图片的 flex 基础宽度，保证缩放比例一致。修改后的代码如下：

.slider img {
  display: block;
  flex-basis: 200px; /* 替换原有width:200px，作为flex布局的基础宽度 */
  max-height: 200px;
  object-fit: cover;
  flex-shrink: 1;
  min-width: 0; /* 核心修复：取消默认最小内容宽度限制 */
}

如果需要保留图片在非flex场景下的宽度表现，也可以同时保留 width:200px 配置，只要添加 min-width:0 即可解决压缩异常问题。

可选优化 #

如果你需要固定图片之间的间距，而非自动分配空白，可以将 .slider 的 justify-content: space-between 替换为 gap 属性，适配性更好：

.slider{
  margin-top: 32px;
  display: flex;
  gap: 16px; /* 按需调整间距大小 */
}

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