Question

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

我希望它们适合div而不会溢出 - 这是

的完美情况

background-size: contain;

但如果图像小于Div，则会按比例放大。我不想那样。我正在寻找的是背景图像的最大宽度和最大高度。

在这里，您可以看到我的问题的一个简单示例（随机图像）： 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;
}

CSS背景大小：包含没有要扩展的图像

1 个答案: