如何使Flex布局行内图片高度适配行高时宽度等比例缩小

你当前的问题是Flex容器仅限制了最大高度，图片高度被压缩到适配容器高度后，宽度仍保持原始尺寸，没有跟随等比例缩放。只需修改图片样式即可解决：

#app-banner-container {
    display: flex;
    flex-direction: row;
    max-height: 75px;
}

img {
  margin-right: 5px;
  /* 新增以下3个属性 */
  height: 100%;
  width: auto;
  flex-shrink: 0;
}

各新增属性作用 #

• height: 100%：明确让图片高度和父容器高度保持一致，自动适配75px的最大高度限制
• width: auto：浏览器会根据图片原始宽高比和当前高度，自动计算对应的宽度，保证等比例缩放不会变形
• flex-shrink: 0：关闭Flex布局默认的子元素自动收缩特性，避免容器宽度不足时图片宽度被额外压缩

如果你的图片存在非正方形的比例，也可以额外添加object-fit: contain属性，确保缩放后图片内容完整不裁切。

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