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

Question

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

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

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

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

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

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

这是一个 fiddle :http://jsfiddle.net/Bakabaka/2zetkrg0/

Answer 1

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

你可以使用max-width:100%; max-height:100%; 在图像上，因此它不会超过容器尺寸，但仍会保持其纵横比并且不会增长到大于其原始大小。接下来，您可以绝对定位图像并为其指定 z-index:-1，这样它就会位于所有内容的后面并且不会受到它的影响。最后给图片top:50%;左:50%； transform:translate(50%,50%); 如果您希望它在其容器内居中。

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

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