Internet Explorer - Flexbox图像比率 [英] Internet Explorer - Flexbox Image Ratio

问题描述

以下小提示在Chrome / Firefox中正确显示图片比例。

The following fiddle shows image ratio correctly in Chrome / Firefox.

然而，在Internet Explorer中，当调整大小以适应其容器时，图片（应为正方形）在弹性框布局中保留其原始高度。

However in Internet Explorer the images (which should be square) retain their original height in the flexbox layout when being resized to fit their container.

http://jsfiddle.net/minlare/knyagjk5/ p>

http://jsfiddle.net/minlare/knyagjk5/

<section>
<article>
    <div class="details">
        <img src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" alt="face"/>
        <h4>Name</h4>
        <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ultrices lectus. Curabitur molestie volutpat mattis.</p>
        </div>
    </div>
</article>
<article>
    <div class="details">
        <img src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" alt="face"/>
        <h4>Name</h4>
        <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ultrices lectus. Curabitur molestie volutpat mattis. Fusce fermentum auctor mauris, auctor lacinia mauris ornare faucibus.</p>
        </div>
    </div>
</article>
</section>

section{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
article{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;

    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    align-items: stretch;

    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
}
.details{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    width: 100%;
    border: 1px solid #666;
}
.image{
    width: 100%;
    max-width: 100%;
}
img{
    width: 100%;
    max-width: 100%;
    height: auto;
}
h4{
    padding: 10px;
    margin-bottom: 0;
}
.description{
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

如何防止/修复？

推荐答案

这是一个已知的已记录的错误，其中IE10和IE11不总是保持内在比率。它的工作原理在IE10的每个@ gaynorvader的评论是，'flex'在IE10的默认值是 0 0 auto ，而不是最终规范的 0 1 auto 。这意味着在IE10中，您的映像被视为 flex-grow：0 ，如 flexbug 6

The reason for this is a known documented bug where IE10 and IE11 didn't always preserve intrinsic ratios. And the reason it works in IE10 as per @gaynorvader's comment is that the default value for 'flex' in IE10 was 0 0 auto rather that the final spec's 0 1 auto. Which means that in IE10, your image is seen as flex-grow: 0 as further explained at flexbug 6

此处的修复是将您的映像设置为 flex：none; ： http://jsfiddle.net/hexalys/knyagjk5/12/ ，或在其周围添加额外的容器。但我建议不要使图像flex项目，如果你真的不需要。在这种情况下，您的文章容器已经是一个flex项目，所以我不认为你需要另一个嵌套的flex项目出的。详细类。这似乎是不必要的。

The fix here is to set your image as flex: none; as per: http://jsfiddle.net/hexalys/knyagjk5/12/, or add an additional container around it. But I'd advise on not making images flex items at all if you don't really need to. In this case, your article container is already a flex-item so I don't think you need to make another nested flex item out of the .details class . That seems unnecessary.

这篇关于Internet Explorer - Flexbox图像比率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！