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

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

我为我正在做的一个学校项目做了一个高清1920x1080的背景，我正在努力使它适合每一个决议。因此，我所做的是根据每个特定的分辨率调整此图像的大小，使我在编码时处于尴尬的境地，因为我不能使用jQuery，我是不允许的

我正在考虑使用screen.width属性，但我也需要一个长度，因为我有多个背景和…x768资源

有没有人能告诉我如何根据用户的屏幕高度和宽度改变我的身体背景

非常感谢，

---

Michiel

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

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

---

尝试此操作

您可以使用

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 + ")"; 
});

---

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

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

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

函数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'）；
//使用条件确定要显示的图像
如果（w<1200和h<800）{
el.style.backgroundImage=“url（'img_1200x800.png'）”；
}
如果（宽<900和高<600）{
el.style.backgroundImage=“url（'img_900x600.png'）”；
}
//等等。。。
}

图像如何与各种分辨率关联？你考虑过使用CSS吗？derek和midu的答案都有效，但作为初学者，我会使用derek的简单答案@戴维托马斯，从没听说过好吧，好的一面，你现在听说过了。享受吧！我不确定这些媒体查询是什么，我会查看它们，但这是一个我作为初学者可以理解的答案。我已经在我的另一台显示器上测试过了，它确实会根据分辨率改变背景。非常感谢。为什么

body=document.getElementsByTagName（'body'）[0]

而不仅仅是使用

document.body

？或者至少

body=document.body？媒体查询是CSS规则，根据浏览器窗口的大小/方向交换CSS。看起来很像derek_duncan的答案，可能是正确的。问题是我一点也不懂数学。谢谢though@Michiel
Math.max
方法只返回传递给它的任何参数中的最高值。这里，它只是用于不支持
window.innerWidth
/
window.innerHeight
的浏览器的安全措施。但你是对的，德里克的想法基本上是一样的。这很管用，但我又一次开始用Javascript编写代码，通常都是这样，德里克·邓肯的答案我理解。
// 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 + ")"; 
});

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