0

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

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

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

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

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

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

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

4

2 回答 2

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-widthand 。min-height

于 2015-06-05T12:10:17.097 回答
0

试试这个，希望它会工作:)

container{
    background-image:  url("/assets/pic.jpg");
    background-size:   cover;   
    background-repeat: no-repeat;
    max-height:250px;
}
于 2015-09-29T13:20:10.803 回答