Css 在flex box中保持垂直对齐图像的纵横比

完整的代码可以在这里看到：

我希望图像在其div容器中“自动适应”，如下所示：（但垂直对齐）

现在，当图像调整大小时，小猫会被压扁。如何解决这个问题？

尝试将图像包装到另一个分区中。

应用

宽度和
高度时，元素的行为与
元素不同

例如，
width:100%
应用于
意味着图像元素将具有与源图片相同的宽度。如果将
width:100%
应用于
，则其宽度将与具有定义宽度的第一个父级相同

因此，您需要的html将是：

首先，为你压扁小猫感到羞耻，其次，我真的看不出你的问题在哪里。你的纵横比对我来说似乎很好，但我也不认为有问题。示例1和示例2的行为方式相同，只是垂直对齐。尝试使窗口小于图像，您会看到图像的大小没有均匀调整
img{
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}

<div class='box'>
    <div class='wrapper'>
        <img src="http://placekitten.com/g/200/300" />
    </div>
</div>    

div.wrapper {max-height:100%;}