Question

我将背景图像应用到了巨无霸上，有两种类型的问题。

1）如果将超大屏幕设置为height-auto，则背景图像的高度会变得很短，但我需要将近500像素的高度。

2）如果我将超大加速器设置为height:500px，则它可以工作，但没有响应。当我以较小的屏幕分辨率打开它时，超大屏幕高度为500px，但背景图像响应迅速，因此显得笨拙。

尝试过的解决方案：

我使用了媒体查询，但是在不同的断点处设置媒体查询似乎并不好。

<div class="jumbotron jumbotron-custom img-responsive" style="background-image: url(img/bg2.jpg); background-size: 100%; background-repeat: no-repeat;">
</div>

Answer 1

您可以调整背景图像的大小以适合div：

background-size: contain;

要缩放背景图像以覆盖整个div：

background-size: cover;

这是一个例子：

<div class="jumbotron jumbotron-custom img-responsive" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/b8/Leibniz-Einhorn.gif); background-size: contain; background-repeat:no-repeat;padding:100px">
some content
</div>

详细说明：

background-size: auto auto;

背景图像将保留其原始大小。例如，如果图像的尺寸为960px x 640px。它的长宽比是3 x2。如果它大于容器，它将被裁剪。

background-size: 120px 80px;

您以像素为单位指定大小，第一个值为水平大小，第二个为垂直大小

background-size: 100% 50%;

您也可以使用百分比值。请注意，这会改变背景图像的长宽比，并导致意外结果。

background-size: contain;

关键字contain将调整背景图片的大小，以确保其完全可见。

background-size: cover;

关键字封面将调整背景图片的大小，以确保元素被完全覆盖。

巨无霸及其背景图像没有响应

1 个答案: