“flex: 1”如何作用于列 Flex 容器中的 <img/> 标签？

Question

一段时间以来，我一直在努力调整图像的高度，以匹配具有列方向的弹性容器中的剩余高度。在主容器中，我有一个

<div>

标签，它也是一个弹性容器并包含多个元素（在实际情况下，其确切高度可能是动态的）。主容器还包含一个

<img>

标签。我希望

<img>

标签将其高度和宽度调整到主容器中的剩余区域。

我以为我通过在

<img>

标签中添加“flex: 1”来解决问题，但是当我进入 Chrome 浏览器的开发工具时，图像超出了主容器的固定高度。更改宽度也会影响图像的显示。 （我也在Edge上签到过）

我想看到什么（忽略拉伸图像）：

访问开发工具时呈现的内容。

这里是演示：https://stackblitz.com/edit/stackblitz-starters-6dckyr?description=HTML/CSS/JS%20Starter&file=script.js,index.html,styles.css&terminalHeight=10&title=Static%20Starter

我读到了几个关于处理

<img>

高度的问题，例如：

flex-grow 不适用于图像

（似乎有些东西发生了变化，因为在全屏模式下 - 该问题的示例也不起作用）

在这种情况下，添加“max-height: 100%”将是对齐图像的宽度/高度以填充空白空间的解决方案。但就我而言，这不是我想要的，因为添加这个 css prop 也会导致图像溢出（因为高度 100% 是主容器的高度）。

我可以用背景图像做一个

<div>

，但现在在这上面花2-3个小时是荣誉问题（我想知道只是因为好奇）。

Answer 1

您是否尝试过在红色 div 上设置 flex: 1 并在图像上设置 flex: 3 ？