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

我试图让我的背景图像放大，因为我把窗口调整到一个较小的屏幕，以便占用整个屏幕（高度和宽度）。当我开始时，我会调整窗口的大小，并且背景图像会变得更小并且重复。所以我发现这个CSS阻止了图像重复并确保它覆盖了屏幕的宽度（但不一定是高度）。调整窗口大小时，如何使背景图像缩放比例适合整个窗口？

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

现在，当我调整窗口大小时，背景图像调整大小并且不重复。但是，由于图像不断变小，移动平台上的背景图像下面会出现空白区域。我如何调整图像大小以免在移动平台上创建空白区域？

来源

2017-08-25 Braden Brown

的可能的复制[CSS背景图像以适合宽度，高度应自动缩放比例（HTTPS： //stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion） – Sand

你必须这样使用它。

.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; 
}

来源

2017-08-25 03:48:39 Sand

使用CSS：

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

随着JS的帮助：

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

来源

2017-08-25 05:19:42 Mohit

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

回答

相关问题