CSS：如何使图像在 flexbox 中不超过其父级高度？答案

【问题标题】：CSS: How to make image not exceed its parents height in flexbox?CSS：如何使图像在 flexbox 中不超过其父级高度？
【发布时间】：2021-05-17 02:52:03
【问题描述】：

我有一个 flex 容器，为了简单起见，它具有 300 像素的固定高度（实际上它具有灵活的高度）。在这个容器中还有其他几个容器，例如标题和文本。

其中一个容器包含一张图片。这个容器应该增长到填满剩余的高度。

理论上，使用 flexbox，这个解决方案是直截了当的（如果没有它也可以工作的图像）：

<html><body>
    <div style="display: flex; flex-flow: column; height: 300px;">
        <div style="background: green;">HEADER</div>
        <div style="background: red;">CAPTION</div>
        <div style="background: blue;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div style="background: yellow; flex: 1">
            <span>flexible image container that fills the remaining space</span>
        </div>
        <div style="background: orange;">
            <button>ACTION</button>
        </div>
    </div>
</body></html>

但是，一旦我添加了图像，布局就会中断，并且图像会占用其固有高度的 100%（在本示例中：500px）。

<html><body>
    <div style="display: flex; flex-flow: column; height: 300px;">
        <div style="background: green;">HEADER</div>
        <div style="background: red;">CAPTION</div>
        <div style="background: blue;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div style="background: yellow; flex: 1">
            <img src="https://via.placeholder.com/100x500" >
        </div>
        <div style="background: orange;">
            <button>ACTION</button>
        </div>
    </div>
</body></html>

如何告诉这张图片不要超过 flexbox 计算的剩余高度？遗憾的是，我不能只给每个元素一个固定的高度，因为在这种情况下每个容器或多或少都可能有任意内容。

【问题讨论】：

stackoverflow.com/questions/36230944/… ?
@Martin 我也发现了这个问题，但无法使答案符合我的问题。至少没有任何建议对图像高度有任何影响。
? jsfiddle.net/s26vkrnj
@MichaelBenjamin Welp，我不记得它是什么，但由于某种原因，我尝试过的方法对我不起作用。感谢您指出此解决方案，因为它比公认的解决方案简单得多。

标签： html css flexbox

【解决方案1】：

忽略图像高度的唯一方法是在图像包装器上使用定位：

1.position the image absolutely with respect to its wrapper,
2.you can either give a width to the image wrapper or give flex: 1 on item to get half of the available width horizontally.

来源：Image flex item does not shrink height in a flexbox

<html><body>
    <div style="display: flex; flex-flow: column; height: 300px;">
        <div style="background: green;">HEADER</div>
        <div style="background: red;">CAPTION</div>
        <div style="background: blue;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div style="position: relative;background: yellow; flex: 1">
           <img style="display:block;width: 100%;height: 100%; object-fit:cover;position: absolute;top: 0;left: 0" src="https://via.placeholder.com/100x500" >
        </div>
        <div style="background: orange;">
            <button>ACTION</button>
        </div>
    </div>
</body></html>

【讨论】：

您的回答确实有效！如果总高度足够大，图像的轻微缺点也会超过其自身的最大高度（源图像的字面高度）。因为在我的具体情况下，它的高度（具有讽刺意味的是）是一个固定值，我可以在它的容器上贴一个“最大高度：500px”并完成它。但是，如果您碰巧知道如何使图像不超过其自身的最大高度，那将是您回答的一个很好的补充！
虽然这是公认的答案并且有效，但我必须指出 MichaelBenjamin 对我的问题的评论，它显示了一个更简单的解决方案 (jsfiddle.net/s26vkrnj)。