Question

我正在尝试将我的背景图像放大，因为我将窗口调整到较小的屏幕，以便占据整个屏幕（高度和宽度）。当我开始时，我会调整窗口大小，背景图像会变小并重复。所以我发现这个CSS阻止图像重复，并确保它覆盖屏幕的宽度（但不一定是高度）。

    .body-index {
       background-image: url("https:......jpeg");
       background-repeat: no-repeat;
       background-size: cover;
    }

现在，当我调整窗口大小时，背景图像会调整大小并且不会重复。但由于图像继续变小，移动平台上的背景图像下方会出现白色空间。如何在不在移动平台上创建空白区域的情况下调整图像大小？

Answer 1

你必须像这样使用它。

.body-index {
    background: url("../images/bg.jpg") no-repeat center center fixed; // All the background properties are set here.

//BG property is set for other browsers
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 2

使用CSS：

img {
    max-width: 100%;
    height: auto;
}

在JS的帮助下：

window.onresize = function(){
    var img = document.getElementById('imageID');
    img.style.width = "100%";
};

在调整窗口大小时，如何使背景图像缩放以适合整个窗口？

2 个答案: