如何让背景图片缩小以适应其元素，但不能放大？

我有一个背景图像的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/

来源

2015-06-05 Bakabaka

你能表现出一定的代码示例。我了解您的请求，但发现很难在没有看到/代码示例的情况下找到解决方案。欢呼 – Martin

我怀疑也许你将不得不包含它自己的元素/ div的背景图像，并在CSS中设置该元素作为一个最大尺寸或正在'background-size：contains;' – Martin

是简单地插入你想给一个背景的选项里面的元素的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，如果你想有背景的最小尺寸。

来源

2015-06-05 12:10:17

这将是我的后备，如果它事实证明它不适用于纯CSS。谢谢！ – Bakabaka

我确实尝试过'div :: before {content：url（background.jpg）;'第一次，但不幸我找不到控制尺寸的方法。 –

试试这个，希望能对大家的工作:)

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

来源

2015-09-29 13:20:10 CreativePS

如何让背景图片缩小以适应其元素，但不能放大？

回答

相关问题