如何使用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>