Question

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

在Chrome中，图像缩放到186px x 186px。在IE11中，它们显示186px x 500px。我尝试将图像包装在另一个div中并将其高度和/或宽度设置为100％，但Chrome和IE11都没有。

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

同一个陌生人正在寻找解决方法，但最重要的答案却无济于事。将min-width: 1px;设置为img可能对您也有帮助。

Answer 2

将min-height: 1px;添加到img似乎是解决方案。我希望我能解释为什么这样有效。 Here's the best I could find：

...我最好的猜测是，最小高度迫使IE重新计算所有调整大小后渲染内容的高度，以及让它意识到高度不同......

在IE11上保持嵌套Flexbox容器中的图像宽高比

2 个答案: