HTML Flexbox布局下img标签不遵循设定宽度规则问题求助

问题原因 #

• Flex布局的子元素默认开启flex-shrink: 1收缩属性，当.img-bar容器的总宽度不足以容纳4张300px宽度的图片时，子元素会被自动压缩宽度，你设置的300px固定宽度会失效
• 你给.img-bar img设置了300px固定高度，宽度被压缩后自然就会出现高度大于宽度的异常显示效果，和原始图片为竖版的特性无关，是Flex布局默认规则导致的问题

解决方案 #

可任选以下一种方案适配需求：

方案1：禁止子项收缩，新增横向滚动（保留固定300px尺寸） #

.img-bar{
  display: flex;
  overflow-x: auto; /* 超出容器宽度时展示横向滚动条 */
  gap: 8px; /* 可选，设置图片之间的间距 */
}

.img-bar img {
  object-fit: cover;
  width: 300px;
  height: 300px;
  flex-shrink: 0; /* 禁止Flex收缩，强制保留300px宽度 */
}

方案2：响应式等分宽度，适配不同屏幕尺寸 #

如果不需要固定300px宽度，希望图片在任意屏幕下都能等分容器宽度，可以使用如下配置：

.img-bar{
  display: flex;
  gap: 8px;
}

.img-bar img {
  object-fit: cover;
  width: 0;
  flex-grow: 1; /* 所有图片等分容器可用宽度 */
  aspect-ratio: 1/1; /* 强制宽高比为1:1，代替固定高度声明 */
}

方案3：固定容器最小宽度 #

如果确定要保留300px的固定图片宽度，也可以直接给图片容器设置最小宽度：

.img-bar{
  display: flex;
  min-width: 1200px; /* 4张300px图片的总宽度，若设置了间距需对应增加宽度值 */
}

.img-bar img {
  object-fit: cover;
  width: 300px;
  height: 300px;
}

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