html - 缩小图像时如何缩小 flexbox

Question

我正在使用 flexbox 将页面上的项目居中，并将项目居中在一行中。我必须处理行内可能很大的图像，所以我使用 max-width=40% 来缩小图像。但是，当我这样做时，适用行的弹性框不会缩小以适应新的图像大小，而是保持大小，就好像图像仍然是 max-width=100%。如何使 flexbox 行更小以占最大宽度属性的 40%？

这是当前的html代码：

<div style="display: flex; flex-direction: column; align-items: center;">
    <label>This is my header.</label>
    <div style="display: flex; flex-direction: row; align-items: center; border: 1px solid black;">
        <img style="max-width: 40%; padding: 5%;" src="path_to_my_image" alt="(!)"/>
        <div style="border: 1px solid black">
            <label>Here is my label</label><br>
            <label>Here is another label</label>           
        </div>
    </div>
</div>

这是当前显示的图像，在 flexbox 行周围带有边框：

这是没有设置最大宽度的样子（底部裁剪以适应）：

标签： htmlcssflexbox

Answer 1

使用 CSS object-fit 属性来解决这个问题。请参阅 w3school CSS object-fit 属性以获得更多帮助。