缩小图像时如何缩小 flexbox答案

【问题标题】：How to shrink flexbox when downsizing image缩小图像时如何缩小 flexbox
【发布时间】：2020-12-28 13:40:41
【问题描述】：

我正在使用 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 行周围带有边框：

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

【问题讨论】：

嗨，约翰，我没有看到问题：Codesandbox。
@mtl 您需要使用更大的图像才能看到问题。使用您提供的链接，由于图像很小，因此不会显示问题。我用大图像制作了一个新示例。更改 max-width 或将其删除以查看更多问题：codesandbox.io/s/new-night-5b6pi?file=/index.html

标签： html css flexbox

【解决方案1】：

不太清楚为什么<img> 作为 flexbox 元素的子元素不容易使用。根据我的经验，它不会回复flex-basis。

但作为一种解决方法，您可以像这样用<div> 包裹<img>，并将<div>s 的初始高度设置为容器的40%：

<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;">
        <div style="flex: 0 1 40%; padding: 5%;">
          <img style="width: 100%;" src="http://4.bp.blogspot.com/-d68l8RLoLc4/UWAJF-ofbJI/AAAAAAAAST4/SUJbO2Dz-RI/s1600/cat1.jpg" alt="(!)"/>
        </div>     
        <div style="border: 1px solid black">
            <label>Here is my label</label><br>
            <label>Here is another label</label>           
        </div>
    </div>
</div>

我使用上面的"flex" shorthand将图片容器div的flex-grow属性设置为0，这样如果flexbox容器上有多余的空间，浏览器就不会调整图片容器的大小。

【讨论】：

【解决方案2】：

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

【讨论】：

您可以添加指向 W3school 文档的链接吗？