Javascript 根据窗口大小调整背景图像大小

我对网页开发和网页设计还很陌生，现在正在为一家公司开发一个网站（www.momentium.no）。他们希望顶部的背景图像能够识别浏览器窗口的大小，以便在加载网站时向下滚动之前，图像填充整个屏幕，而不显示下面的内容

你们谁能看看这个吗？如果能得到一点帮助就太好了

谢谢，

---

Yngvar

您可以有两种解决方案：

• 正如Pete所说，您可以使用“背景大小”css3，但它不兼容较旧的浏览器
• 您可以将javascript与

  $（窗口）.height（）和
  $（窗口）.width一起使用

---

唯一的方法是为您的公司创建一个响应性设计。所有问题都将通过响应性设计解决
• 更改图像大小取决于浏览器窗口的大小
• 也可以将图像更改为另一个图像

---

您可以将“背景图像”div的高度设置为100%，这样就可以了
检查此代码：

#background-image {
width: 100%;
height: 100% !important;
position: absolute !important;
overflow: hidden;
text-align: center;
background: #000;
}

---

使用CSS将高度设置为100%是可行的，但是您必须修改HTML结构，以便在调整窗口大小时保持其流动性
否则，您可以尝试以下代码段：
JS:

var $imageWrapper = $('#background-image'),
    $contentSpacer = $('section#wrapper > header'),

    // Some buffer value, adjust this to get the rest of the content aligned properly
    buffer = 200;

// Set the div height on pageload
$(document).ready(function() {
   var windowHeight = $(window).height();

   $imageWrapper.height( windowHeight );
   $contentSpacer.height( windowHeight );
});

// Change the div height on window resize
$(window).resize(function() {
  var $this = $(this),
      thisHeight = $this.height();

  // Set the height of the image container to the window height
  $imageWrapper.height( thisHeight );
  $contentSpacer.height( thisHeight - buffer );
});

#background-image {
  background-size: cover;

  // Change this to the minimum height your page will support
  min-height: 600px;
}

CSS:

var $imageWrapper = $('#background-image'),
    $contentSpacer = $('section#wrapper > header'),

    // Some buffer value, adjust this to get the rest of the content aligned properly
    buffer = 200;

// Set the div height on pageload
$(document).ready(function() {
   var windowHeight = $(window).height();

   $imageWrapper.height( windowHeight );
   $contentSpacer.height( windowHeight );
});

// Change the div height on window resize
$(window).resize(function() {
  var $this = $(this),
      thisHeight = $this.height();

  // Set the height of the image container to the window height
  $imageWrapper.height( thisHeight );
  $contentSpacer.height( thisHeight - buffer );
});

#background-image {
  background-size: cover;

  // Change this to the minimum height your page will support
  min-height: 600px;
}

您拥有的其余代码似乎是正确的，因此添加这些代码应该可以解决问题。这里需要记住几件事：
• JS没有对此处应用的高度设置任何限制，因此即使窗口大小调整为10px高度，CSS仍将应用。大多数设计在破坏之前都有一个最小高度/宽度，因此在

  #背景图像
  div上使用
  min height
  可能是个好主意
  

• 在实现之前，请检查，如果需要支持其中一个不受支持的浏览器，则需要编写回退或以适当方式重新构造代码，使其降级。IE9+、Chrome21+和FF26+应该足够好

• 看起来您在主部分中使用了间隔符，以确保页面内容位于主滑块之后。可以修改页面的结构，这样就不必修改两个元素的高度。正如我在开始时提到的，如果您重新构造，您可能会使用纯CSS解决方案

---

我们可以看看您的一些代码吗？根据浏览器兼容性，您可以查看css3属性background sizeview source：它位于id为“background image”的第一个div中。我想把它复制到这里，但结果一团糟！谢谢你的快速回复！我会检查一下，看看是否有效！这是非常没有建设性的！对于像这样的人，请随意使用评论。