chrome 不尊重 flexbox 中的图像纵横比答案

【问题标题】：chrome doesn't respect image aspect ratio in flexboxchrome 不尊重 flexbox 中的图像纵横比
【发布时间】：2016-01-28 13:38:32
【问题描述】：

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>

我在an answer to a similar question 中读到这是一个 Chrome 错误。我怎样才能彻底解决它？

谢谢

【问题讨论】：

你需要使用 display:flex 吗？如果你使用 display:inline-block，你会得到你想要的。
@Cruiser 我宁愿使用 flexbox 但你是对的，display: inline-block 可以很好地解决问题。（只要记得注释掉div之间的空格）
您从哪里得知这是 Chrome 错误？我在链接页面上找不到该声明。

标签： html css google-chrome responsive-design flexbox

【解决方案1】：

默认情况下，flexbox 中的项目会拉伸它们的大小。看到您不希望它们在横轴（垂直）上拉伸，您可以使用容器上的 align-items 来更改默认行为。

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

CSS

.flexbox {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
img {
  width: 50%;
}

【讨论】：

接受这个作为答案，因为@chelsea 的解决方案在图像过去的位置留下了许多无关的空白。
一直在寻找这个答案。谢谢！
align-items 部分实际上足以让我添加。谢谢！

【解决方案2】：

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

【讨论】：

太棒了！几天来，我一直在用头撞桌子，试图让它发挥作用！
如果您需要在 Internet Explorer 上使用此解决方案，很遗憾，此解决方案不起作用……
这解决了我只在 chrome 上加载的宽高比很好但使用 js 添加/删除 display: none 以显示隐藏图像不会保留宽高比的问题

【解决方案3】：

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

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

【讨论】：

这对我不起作用。您介意用示例更新您的答案吗？