如何在 img 中使用 flexbox

【问题标题】：How to use flexbox with img's如何在 img 中使用 flexbox
【发布时间】：2016-06-01 09:02:37
【问题描述】：

我正在尝试生成两个图像的垂直堆栈，这些图像以不同的视口大小进行缩放。我希望所有图像都保留它们的纵横比并使用 flexbox（不是绝对要求，而是理想的）。

现在我的 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

【问题讨论】：

标签： html css image flexbox

【解决方案1】：

将flex 用于图像至少目前是个坏主意，因为它有很多flaws and bugs，所以如果你把这部分去掉，你会得到类似的东西，这可能是一个解决方案你。

如果您仍然需要flex，推荐的方法是使用divwrap 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>

【讨论】：

flexbox 怎么样？是否可以在verticalimages上使用display flex来做到这一点？
@NunoCalaim 用解释/链接资源更新了我的答案。