display布局下的img变形问题

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

然而我想要的效果是：

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

将align-items改为center之后，因为两张图片的宽高比例是不一样的，所以在宽度相同的情况下，高度自适应，就会一个高一个低。这里为什么不把图片高度写死，是因为宽度用的是百分比。所以高度我还没有掌握写死的方法，因此就让它自适应了。
网上还有一种办法是给图片添加一个height:100%的属性，其实也就是让align-items的默认值stretch不生效呗。（stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。）
改完之后效果是这样滴：

效果等同于将align-items的值设置为flex-start。
因为两张图片宽高比虽然不同，但是相差不大，所以只能让右边的图片高度稍微大一些了。从而实现理想的效果：

这里我的办法是在img外面包裹一个div标签，然后div作为flex子项。img作为div的子元素。设置div的宽度，img的宽高都是100%。是可以实现理想效果的。
这里个人认为是高一点的图片将div左侧div撑开的比右侧div高。然后因为div的父元素的align-items属性值是stretch，所以将两个div的高度调成一样了。这时候img的父元素div相当于了有了width和height值，img的width和height设为100%就可以生效，占满整个div。
但是有一点很不解的就是，为什么在img外面包裹了一层div，同样是stretch的作用，div的高度就以左侧这个高一些图片的高度为最大值。而去掉div，直接将img作为flex子项的时候，却不能做到以左侧高一点的图片的高度为最大值，而是纵向疯狂拉伸！
我去网上查了一下，大家都是只知道解决的办法，却找不到之所以能解决的原理。对此我找了蛮久也没有找到，找stretch的拉伸规则也没找到。估计得去书里面的找了，但是现在还在实习，回学校啃书的时候再找吧，不然纠结在这个问题太多时间，影响工作进度就完蛋了。