在弹性框中保持垂直对齐图像的纵横比

【问题标题】：Keep aspect ratio of vertical aligned image in flex box在弹性框中保持垂直对齐图像的纵横比
【发布时间】：2014-09-16 07:08:54
【问题描述】：

img{
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}

完整代码可以看这里：http://jsfiddle.net/ZSSVt/

我希望图像在其 div 容器内“自动适应”，如下所示：http://jsfiddle.net/y4Y3S/（但垂直对齐）。

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

【问题讨论】：

【解决方案1】：

updated jsFiddle

尝试将图像包装在另一个 div 中。应用 width 和 height 时，<img> 元素的行为与 <div> 元素不同。

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

因此，您想要的 html 将是：

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

wrapper div 对应的css：

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

【讨论】：