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不保留纵横比