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

Question

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

当 div 大于 250px 时，背景图片不会缩放。这是期望的行为。到目前为止一切顺利。

如果 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;
}