Question

我有背景图片的div的大小未知。它可以是16px高，可以是1600px，以及介于两者之间的任何东西。那里有一个背景图像，大约440px宽，250px高。

当div高于250像素时，背景图像不会缩放。这是所希望的行为。到目前为止一切都很好。

如果div的高度低于250像素，则会剪切背景图像。这是不受欢迎的：我希望它能扩展到div的较小高度。

我如何使用css（或者，如果不可能，js）在不适合div的情况下使背景图像缩小，但在div大于其自身时从不放大？基本上，我想使用background-size: contain;，但最大设置为图像的高度。

我尝试了各种封面和包含，但都没有达到预期的效果。

This question也无济于事，因为我无法在div上设置最大高度。它包含网站编辑添加的内容。如果这很多，那么所有这些都必须显示出来。

这是一个小提琴：http://jsfiddle.net/Bakabaka/2zetkrg0/

Answer 1

只是在要为选项提供背景的元素中插入img吗？

您可以在图片上使用max-width:100%; max-height:100%;，因此它不会超过容器尺寸，但仍会保持其宽高比，并且不会比原始尺寸大。接下来，您可以绝对定位图像并将其z-index:-1赋予它以使其落后于所有内容并且不会受其影响。最后，如果您希望图像在其容器中居中，则只需提供图像top:50%; left:50%; transform:translate(50%,50%);。

这是一个演示：https://jsfiddle.net/ilpo/9dnqd6bc/1/

如果您希望背景的最小尺寸，您甚至可以设置min-width和min-height。

Answer 2

试试这个，希望它能起作用：）

container{
    background-image:  url("/assets/pic.jpg");
    background-size:   cover;   
    background-repeat: no-repeat;
    max-height:250px;
}

如何仅缩小背景图像以适合其元素，但不能按比例放大？

2 个答案: