如何在缩小图像时缩小flexbox

Question

我正在使用flexbox在页面上居中项目，也在一行中居中项目。我必须处理行中可能很大的图像，所以我使用max-width=40%来缩小图像的大小。但是，当我这样做时，适用行的flexbox不会缩小以适应新的图像大小，但会保留该大小，就好像图像仍然是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行周围有一个边框：

​

以下是未设置max-width (底部裁剪以适合)的情况：

​

Answer 1

我不太确定为什么<img>作为flexbox元素的子元素不容易使用。根据我的经验，它对flex-basis没有反应。

但作为一种解决办法，您可以像这样用<div>包装<img>，并将<div>的初始高度设置为容器的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容器上有额外的空间，浏览器就不会调整图像容器的大小。

Answer 2

使用CSS object-fit属性来解决这个问题。有关更多帮助，请参阅w3school CSS对象适配属性。