display布局下的img变形问题

今天用display布局两个img元素的时候，发现图片自动变形了。问题如下：

然而我想要的效果是：

那么问题来了，为什么会变形呢？是因为flex布局的align-items属性的值默认是stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
但是为什么height变得这么大，我还没有找到原因。而且，在chrome中显示是理想状态的，我是用手机测试的时候才发现图片变形的问题，然后搜狗浏览器的显示效果和手机是一样的。看来以后手机调试还得用搜狗了。
题外话不多说，既然找到了图片变形的原因是stretch为align-items的默认值。那么就改下align-items的值就完事儿了。然而，结果如下：

将align-items改为center之