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

Question

我使用了CSS弹性框布局,如下所示:

如果屏幕变小,它会变成这样:

问题是图像没有调整大小,保持与原始图像的纵横比.

是否可以使用纯CSS和弹性框布局,以便在屏幕变小时调整图像大小？

这是我的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;

}

Answer 1

我来到这里寻找我扭曲的图像的答案.不完全确定操作上面正在寻找什么,但我发现添加align-items: center将为我解决它.阅读文档,如果你直接弯曲图像,那么覆盖它是有意义的,因为align-items: stretch它是默认的.另一个解决方案是先用div包装你的图像.

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

Answer 2

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

http://jsfiddle.net/89dtxt6s/

Answer 3

您可能想尝试一下非常简单的CSS3新功能:

img { 
  object-fit: contain;
}

它保留了画面比例(如当您使用的背景图片伎俩),并在我的情况很好地工作了同样的问题.

但请注意,IE不支持它(请参阅此处的支持详细信息).

Answer 4

我建议查看background-size调整图像大小的选项。

如果将图像设置为背景图像，则可以设置：

background-size: contain

或者

background-size: cover

这些选项在缩放图像时会考虑高度和宽度。这将适用于 IE9 和所有其他最近的浏览器。