Chrome v75：在 flex 列 div 内拉伸最大宽度的图像答案

【问题标题】：Chrome v75 : Images with max-width stretched inside a flex column divChrome v75：在 flex 列 div 内拉伸最大宽度的图像
【发布时间】：2019-10-24 18:40:18
【问题描述】：

自从较新的 Chrome 版本 (75.0.3770.80) 以来，我网站上的图片很少被拉伸。

这些图像在一个 div 中，具有这些属性：

<div class="column">
    <img
        :src="insuranceLogo"
        class="insurance"
    >
    <span>
        {{ offer.offer_name }}
    </span>
</div>

.column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.insurance {
    width: 100%;
    max-width: 150px;
}

直到今天，它运行良好，但在新的 Chrome 版本中，我的图像都被拉伸了！

我在旧版 Chrome 上尝试过，没问题，所以我将其更新为新版本：结果相同，延长了。

我的解决方案是将我的 img 标签包装在一个 div 中。但我很想知道为什么这种行为会改变。

谢谢！ :)

【问题讨论】：

标签： html css google-chrome flexbox

【解决方案1】：

我知道这并不能回答您的主要问题：“为什么这种行为会改变？”。

只是发布另一个可能的解决方案。为图像元素设置flex-basis: 0; 对我有用。

.insurance {
    width: 100%;
    max-width: 150px;
    flex-basis: 0;
}

【讨论】：

很好的修复！我会试试看:)

【解决方案2】：

因为基于弹性的计算发生了变化：

https://chromium.googlesource.com/chromium/src/+/3ed97a76cfe8dd422770bcc3b62851333a18ed32

修复此错误：

https://bugs.chromium.org/p/chromium/issues/detail?id=958802

【讨论】：