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

Question

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

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

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

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

Answer 1

updated jsFiddle

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

例如，应用于width: 100%的{​​{1}}表示图片元素的宽度与源图片的宽度相同。如果您将<img>应用于width: 100%，则其宽度将与定义宽度的第一个父级相同。

因此，您想要的HTML将是：

<div>

使用<div class='box'> <div class='wrapper'> <img src="http://placekitten.com/g/200/300" /> </div> </div> div的相应css：

wrapper