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

Question

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

在 Chrome 中，图像缩放为 186px x 186px。在 IE11 中，它们显示 186px x 500px。我试过将图像包装在另一个 div 中并将其高度 and/or 宽度设置为 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>

Answer 1

看起来将 min-height: 1px; 添加到 img 是解决方案。我希望我能很好地解释为什么会这样。 Here's the best I could find:

... My best guess is that the min-height forces IE to recalculate the height of the rendered content after all of the resizing, and that makes it realize that the height is different....

Answer 2

陌生人正在寻找解决方法，但置顶回答没有帮助。将 min-width: 1px; 设置为 img 也可能对您有所帮助。

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

Maintain image aspect ratio in nested flexbox container on IE11

html

css

google-chrome

flexbox

internet-explorer-11