如何使用flexbox與img的

Question

我試圖產生兩個圖像的垂直堆棧，可以用不同的視口大小進行縮放。我希望所有的圖像保持其長寬比和使用柔性盒（不是絕對的要求，但理想）。

現在我的HTML是這樣

<div class="fullwidth"> 
    <div class="verticalimages"> 
    <img src="http://placehold.it/500x600"> 
    <img src="http://placehold.it/500x600"> 
    </div> 
</div> 

與CSS

.fullwidth{ 
    width:100%; 
} 

.verticalimages{ 
    display: flex; 
    flex-direction: column; 
    width: 33.3%; 
    height: calc(33.3% * 600/500); 
} 

圖像的寬度相應但不是高度擴展。我究竟做錯了什麼？

我這裏的代碼：

http://codepen.io/anon/pen/Rrmyyd

Answer 1

使用flex的圖像是，至少就目前而言，一個壞主意，因爲它有很多flaws and bugs，所以如果你需要的那部分，你」會得到這樣的東西，這可能是一個解決方案。

如果您仍然需要flex，推薦的方法是使用div來wrap each img。

.fullwidth { 
 
    width: 100%; 
 
} 
 

 
.verticalimages { 
 
} 
 

 
.verticalimages img { 
 
    display: block; 
 
    width: 33.3%; 
 
    height: auto; 
 
}

<div class="fullwidth"> 
 
    <div class="verticalimages"> 
 
    <img src="http://placehold.it/500x600"> 
 
    <img src="http://placehold.it/500x600"> 
 
    </div> 
 
</div>