html - 在 div 内拟合和居中图像

Question

我有以下结构:

<div style="height: 100px; width: 33%; line-height: 100px;">
   &nbsp;<img style="height: auto; width: auto; max-height: 90px; max-width: 90%; vertical-align: middle;">
</div>

所以我想将图像在父 div 中垂直居中，并始终保持缩放。 line-height 属性负责使图像居中。

问题在于，要使 line-height 正常工作，我需要在 div 中添加一些文本，这就是我添加   的原因，但这意味着图像是取下 - 宽度设置为 100%，图像位于新行 -   下方 100px。

如果我将 display: block; 添加到图像，它也会将宽度设置为 100% 并被删除。

我该如何解决这个问题？

Answer 1

div > img { background-size: contain; }

http://www.w3schools.com/cssref/css3_pr_background-size.asp

至于 90% 的宽度，只需使用 CONTAIN 选项将图像包裹在另一个 div 中，然后将包裹内的 div 调整为 90%