Internet Explorer - Flexbox圖像比率

Question

以下小提琴在Chrome / Firefox中正確顯示圖像比率。

但是，在Internet Explorer中，當調整大小以適合其容器時，圖像（應該是正方形）在flexbox布局中保留其原始高度。

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

如何預防/修復這個問題？

Answer 1

其原因是一個已知的文檔錯誤 ，其中IE10和IE11並不總是保留內在比率 。 根據@ gaynorvader的評論它在IE10中工作的原因是IE10中'flex'的默認值是0 0 auto而不是最終規格的0 1 auto 。 這意味着在IE10中，您的圖像被視為flex-grow: 0如flexbug 6中進一步說明的那樣

這里的修復是將您的圖像設置為flex: none; 按照： http ： //jsfiddle.net/hexalys/knyagjk5/12/ ，或在其周圍添加一個額外的容器。 但是如果你真的不需要的話，我建議不要讓圖像彈性項目。 在這種情況下，您的article容器已經是一個flex項，所以我認為您不需要在.details類之外創建另一個嵌套的flex項。 這似乎沒必要。

Answer 2

添加一點CSS：

img {
  min-height: 1px;
}

http://jsfiddle.net/mblase75/3Lb5f8pe/

老實說，我希望我知道為什么這樣做。 根據hexalys的回答 ，我認為這迫使IE重新計算高度/寬度比。 （無論如何，我現在將它應用於我自己的代碼，其中受影響的元素是標簽而不是圖像;它也在那里工作。）