在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％