我如何让背景图像只缩小以适合其元素，但不放大？

Question

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

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

如果 div 的高度低于 250 像素，背景图像将被剪裁。这是不需要的：我希望它缩放到 div 的较小高度。

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

我尝试了各种覆盖和包含，但是none达到了预期的效果。

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

这里是 fiddle：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;
}

我如何让背景图像只缩小以适合其元素，但不放大？

How do I have a background-image only scale down to fit its element, but not scale up?

css

background-image

scale

background-size