img{
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
}
完整的代码可以在这里看到：http://jsfiddle.net/ZSSVt/
我希望图像在其div容器内“自动适应”,如：http://jsfiddle.net/y4Y3S/(但垂直对齐).
现在,当图像调整大小时,小猫会被压扁.如何解决？
解决方法
updated jsFiddle
尝试将图像包装在另一个div中. < IMG>元素的行为与< div>不同应用宽度和高度时的元素.
例如宽度：100％应用于< img>表示图像元素的宽度与源图片的宽度相同.如果将宽度：100％应用于< div>,则它将具有与具有已定义宽度的第一个父级相同的宽度.
因此,您想要的HTML将是：
<div class='Box'> <div class='wrapper'> <img src="http://placekitten.com/g/200/300" /> </div> </div>
使用包装器div的相应css：
div.wrapper {max-height:100%;}
