在 IE11 上的嵌套 flexbox 容器中保持圖像縱橫比

Question

我正在使用 flexbox 來顯示一行塊。 每個塊都使用 flexbox 來顯示一列元素。 其中一個元素是需要保持縱橫比的圖像。 下面的代碼是我的代碼的簡化版本，它說明了我正在嘗試做的事情。

在 Chrome 中，圖像縮放為 186px x 186px。 在 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" 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是解決方案。 我希望我有一個很好的解釋為什么這行得通。 這是我能找到的最好的：

...我最好的猜測是 min-height 強制 IE 在所有調整大小后重新計算渲染內容的高度，這使得它意識到高度是不同的....

Answer 2

尋找修復的陌生人，但在最佳答案中出現並沒有幫助。 設置min-width: 1px; 到img也可以幫助你。