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

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

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

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

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

这是我的HTML:

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

}

gdbj.. 63

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

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

"我来到这里寻找我扭曲的图像的答案"我出于同样的原因来到这里,你的解决方案帮助了我(标记为实际的解决方案根本没有帮助我) (11认同)

小智.. 59

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

http://jsfiddle.net/89dtxt6s/