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

Posted

技术标签:

【中文标题】在 IE11 上的嵌套 flexbox 容器中保持图像纵横比【英文标题】:Maintain image aspect ratio in nested flexbox container on IE11 【发布时间】:2018-09-01 07:08:43 【问题描述】:

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

在 Chrome 中,图像缩放为 186 像素 x 186 像素。在 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" >
            <h2>Block title</h2>
        </div>
        <div class="block">
            <img src="http://placehold.it/500" >
            <h2>Block title</h2>
        </div>
        <div class="block">
            <img src="http://placehold.it/500" >
            <h2>Block title</h2>
        </div>
    </div>
</section>

【问题讨论】:

真正有趣的是它如何使用 Edge 正常工作 (230 x 230) 不开玩笑。多久才能完全抛弃 IE? 【参考方案1】:

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

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

【讨论】:

【参考方案2】:

寻找修复的陌生人,但在最佳答案中的推荐并没有帮助。 将min-width: 1px; 设置为img 也可能对您有所帮助。

【讨论】:

以上是关于在 IE11 上的嵌套 flexbox 容器中保持图像纵横比的主要内容,如果未能解决你的问题,请参考以下文章

IE 11:图像在 flexbox 中无法正确缩小

IE 11 Flexbox子溢出容器[重复]

具有绝对位置的 Flexbox 容器不适合 IE 中的内容宽度

IE 11 的 Flexbox 问题

IE11 flexbox 最大宽度和边距:自动;

图像的最大宽度不适用于 IE 11 的 flexbox,但适用于谷歌浏览器