大佬教程收集整理的这篇文章主要介绍了css – 在弹性框中保持垂直对齐图像的纵横比，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
img{ max-height: 100%; max-width: 100%; width: auto; height: auto; }
完整的代码可以在这里看到：http://jsfiddle.net/ZSSVt/
我希望图像在其div容器内“自动适应”,如：http://jsfiddle.net/y4Y3S/(但垂直对齐).
现在,当图像调整大小时,小猫会被压扁.如何解决？
尝试将图像包装在另一个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%;}
以上是大佬教程为你收集整理的css – 在弹性框中保持垂直对齐图像的纵横比全部内容，希望文章能够帮你解决css – 在弹性框中保持垂直对齐图像的纵横比所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。