chrome不符合flexbox中的圖像寬高比

Question

Flexbox可以輕松地根據可用空間進行智能增長和縮小的布局。 我正在使用此功能繪制兩個圖像，每個圖像占據屏幕寬度的一半。 在Firefox中，圖像按預期呈現並保持其縱橫比，但在Chrome中，圖像被水平壓扁至50％，並垂直留在其全高。

這是我正在談論的演示：

 .flexbox { width: 100%; display: flex; } img { width: 50%; } 

 <div class="flexbox"> <img src="http://res1.windows.microsoft.com/resbox/en/windows/main/2b03b0c4-85f7-4c28-9c60-1c7af2a62fa8_5.jpg" /> <img src="http://res1.windows.microsoft.com/resbox/en/windows/main/b89eff70-398d-4b1b-8806-02458a185c5a_5.jpg" /> </div> 

我已經閱讀了類似問題的答案 ，這是一個Chrome錯誤。 我怎樣才能干凈利落地工作呢？

謝謝

Answer 1

flexbox中的項目默認會拉伸它們的大小。 看到您希望它們不在橫軸（垂直）上伸展，您可以使用容器上的align-items來更改默認行為。

小提琴： http ： //jsfiddle.net/g1vLff23/

CSS

.flexbox {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
img {
  width: 50%;
}

Answer 2

適用object-fit: scale-down; 到圖像。 是的，添加height: auto; 不幸的是，並沒有做到這一點。 類似的問題在這里得到解決： flexbox內的img的max-width不保持縱橫比

Answer 3

您可以通過將height屬性添加到img規則並為其賦值auto來解決此問題：

img{
    height:auto;
    width:50%;
}