Question

有很多这个问题散布在stackoverflow上，但我似乎找不到特别适合我情况的答案。

我已经为我正在制作的学校项目提供了高清1920x1080的背景，我正在尝试使其适合所有分辨率。所以我所做的是为每个特定分辨率调整此图像的大小，让我处于一个尴尬的地方来编码，因为我不能使用jQuery ，我不被允许。

我正在考虑使用screen.width属性，但我需要一个长度，因为我有多个背景，并且... x768 resoulution。

是否有人能够告诉我如何改变身体的背景，具体取决于用户的屏幕高度和宽度？

非常感谢，
米希尔

Answer 1

您可以使用window.innerWidth和window.innerHeight来获取浏览器窗口的当前尺寸。

这意味着，如果您的浏览器占用了1920x1080桌面的一半，它将计算为：

window.innerWidth ~= 540
window.innerHeight ~= 1920 // actually something smaller because it doesn't count your browser's chrome

您的窗口当然可以改变大小，如果您想要处理它，您可以为您的窗口收听“调整大小”事件：

window.addEventListener('resize', function () {
  // change background
});

要在不使用jQuery的情况下更改正文背景，您可以执行以下操作：

document.body.style.backgroundImage = "url(/* url to your image...*/)";

回顾一下：

// when the window changes size
window.addEventListener('resize', function () {
  var windowWidth = window.innerWidth; // get the new window width
  var windowHeight = window.innerHeight; // get the new window height

  // use windowWidth and windowHeight here to decide what image to put as a background image
  var backgroundImageUrl = ...;

  // set the new background image
  document.body.style.backgroundImage = "url(" + backgroundImageUrl + ")"; 
});

我不确定您应该与哪些浏览器兼容。这应适用于所有最新版本的大浏览器。

Answer 2

您可以根据结果检查窗口宽度并更改背景。

var width = window.innerWidth;
var height = window.innerHeight;
var body = document.body;

if (width <= 1600 && height <= 1000) {
  body.style.background = "url(path/to/1600x1000.jpg)";
}
if (width <= 1400 && height <= 900) {
  body.style.background = "url(path/to/1400x900.jpg)";
}
// continue as desired

http://jsbin.com/wosaduho/1/

更好的是，使用一些媒体查询来减少所需的javascript。

@media screen and (max-width: 1600px) {
 .element {
   background: url(path/to/1600x1000.jpg);
 }
}
@media screen and (max-width: 1400px) {
 .element {
   background: url(path/to/1400x900.jpg);
 }
}

Answer 3

body {
   background-image:  url(images/background.jpg);
   background-size:cover;/*If you put "contain" it will preserve its intrinsic aspect ratio*/      background-repeat: no-repeat;
}

试试这个

Answer 4

您可能希望在窗口加载和/或窗口调整大小时触发类似以下的功能：

function SwapImage(){
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
        h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
        el = document.getElementById('change-my-background');

    // use conditionals to decide which image to show
    if(w < 1200 && h < 800){
        el.style.backgroundImage = "url('img_1200x800.png')";
    }

    if(w < 900 && h < 600){
        el.style.backgroundImage = "url('img_900x600.png')";
    }

    // etc...
}

根据分辨率更改背景图像 - 仅限javascript

4 个答案: