CSS背景大小：不包含要放大的图像

Question

我有一个固定的宽度/高度Div，其中包含图像作为背景。

我希望它们适合div而不会溢出-这是完美的情况

background-size: contain;

但是，如果图像小于Div，则将其放大。我不想要那个。我正在寻找的是背景图像的最大宽度和最大高度。

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

无法更改页面的html代码。

Answer 1

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

这是一种替代方法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;
}