在 IE11 中嵌套的 flexbox 容器中保持图像纵横比

Question

我正在使用flexbox来显示一排块。每个块都使用flexbox来显示元素的列。其中一个元素是需要保持其纵横比的图像。下面的代码是我简化后的代码，说明了我要做的事情。

在Chrome中，图像缩放到186px x 186px。在IE11中，它们显示为186px x 500px。我已经尝试将图像包装在另一个div中，并将其高度和/或宽度设置为100％，但无论如何都不能同时适用于Chrome和IE11。

section {
    max-width: 600px;
    margin: 0 auto;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-top: 10px;
}

.block {
    margin: 0;
    flex: 1 0 150px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.block img {
    width: 100%;
}

<section>
    <div class="grid">
        <div class="block">
            <img src="http://placehold.it/500" alt="">
            <h2>Block title</h2>
        </div>
        <div class="block">
            <img src="http://placehold.it/500" alt="">
            <h2>Block title</h2>
        </div>
        <div class="block">
            <img src="http://placehold.it/500" alt="">
            <h2>Block title</h2>
        </div>
    </div>
</section>

- Todd

---

真的很有趣，它如何在Edge上正确运行（230 x 230）。 - xsami

不开玩笑，我们什么时候才能完全放弃IE？ - Todd

Answer 1

看起来在 img 上添加 min-height: 1px; 是解决方案。我希望我能对为什么这样做有一个很好的解释。在此处是我找到的最佳解释：

... 我最好的猜测是，这个min-height强制IE在所有调整大小后重新计算呈现内容的高度，并使其意识到高度不同...

- Todd

Answer 2

你好，寻找解决方案的陌生人，但置顶答案提供的内容并没有帮助。将 img 的 min-width: 1px; 设置为可能也会有所帮助。

- Yakovonthego