Question

我正在尝试生成两个图像的垂直堆栈，这些图像可以使用不同的视口大小进行缩放。我希望所有图像都保留其纵横比并使用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

Answer 1

至少就目前来说，使用flex是一个坏主意，因为它有很多flaws and bugs，所以如果你拿出那部分，你会得到这样的东西，可能是你的解决方案。

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

.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>

如何使用img＆＃39;

1 个答案: