CSS背景大小：包含没有图像的比例尺

Question

我有一个固定的宽度/高度Div，它将图像保存为背景。

我希望他们能够适应在div没有溢出 - 这是

background-size: contain;

完美的情况，但如果图像是比事业部小，它正在扩大规模。我不想那样。 我正在寻找的是像背景图像的最大宽度和最大高度。

在这里你可以看到一个简单的例子（用随机图像），我的问题： http://jsbin.com/uQevuna/1/edit

这是不可能改变页面的HTML代码。

Answer 1

这实际上不能用background-size来完成，因为它们的关键字并没有考虑原始图像的大小。

Here's an alternative使用display: table-cell

HTML：

<div class="wrap"> 
    <div> 
     <img src="http://placekitten.com/200/200" alt="" /> 
    </div> 
</div> 

CSS：

.wrap { 
    display: table; 
} 
.wrap div { 
    width: 300px; 
    height: 300px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

img { 
    max-width: 100%; 
    max-height: 100%; 
    vertical-align: middle; 
}