在 CSS FlexBox 布局中自动调整图像大小并保持纵横比？

Question

我使用了如下所示的 CSS 弹性框布局：

如果屏幕变小，它会变成这样：

问题是图像没有调整大小以保持原始图像的纵横比。

如果屏幕变小，是否可以使用纯 CSS 和 flex box 布局让图像调整大小？

这是我的 html：

 <div class="content">
  <div class="row">
    <div class="cell">
      <img src="http://i.imgur.com/OUla6mK.jpg"/>
    </div>
    <div class="cell">
      <img src="http://i.imgur.com/M16WzMd.jpg"/>
    </div>
  </div>
</div>

我的CSS：

 .content {
    background-color: yellow;
}

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    align-items: center;

    background-color: red;

}

.cell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;

    padding: 10px;
    margin: 10px;

    background-color: green;
    border: 1px solid red;
    text-align: center;

}

原文由 confile 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

img {max-width:100%;} 是这样做的一种方式。只需将它添加到您的 CSS 代码中即可。

http://jsfiddle.net/89dtxt6s/

原文由 Omega 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我来这里是为了寻找我扭曲的形象的答案。不完全确定 op 在上面寻找什么，但我发现添加 align-items: center 会为我解决它。阅读文档，如果您直接弯曲图像，那么覆盖它是有意义的，因为 align-items: stretch 是默认值。另一种解决方案是先用 div 包装您的图像。

 .myFlexedImage {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

原文由 gdbj 发布，翻译遵循 CC BY-SA 3.0 许可协议