Question

Flexboxes可以轻松地根据可用空间进行智能增长和缩小的布局。我正在使用此功能绘制两个图像，每个图像占据屏幕宽度的一半。在Firefox中，图像按预期呈现并保持其纵横比，但在Chrome中，图像被水平压扁至50％，并垂直留在其全高。

这是我正在谈论的一个演示：

＆＃13;

.flexbox {
  width: 100%;
  display: flex;
}
img {
  width: 50%;
}

＆＃13;

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

＆＃13;

我已在an answer to a similar question中读到这是Chrome错误。我怎样才能干净利落地工作呢？

由于

Answer 1

默认情况下，flexbox中的项目会扩展其大小。看到您希望它们不在横轴（垂直）上伸展，您可以使用容器上的include_once($_SERVER["DOCUMENT_ROOT"].'/php/db.inc.php');来更改默认行为。

小提琴： http://jsfiddle.net/g1vLff23/

<强> CSS

align-items

Answer 2

将object-fit: scale-down;应用于图片。是的，不幸的是，添加height: auto;并不能解决问题。类似的问题在这里得到解决：max-width of img inside flexbox doesn't preserve aspect ratio

Answer 3

您可以通过将height属性添加到img规则并为其赋予auto值来解决此问题：

img{
    height:auto;
    width:50%;
}

chrome并不尊重flexbox中的图像宽高比

3 个答案: