Question

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

你们中的任何人都可以查看这个吗？得到一些帮助会很棒！

谢谢， Yngvar

Answer 1

使用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 );
});

<强> CSS：

#background-image {
  background-size: cover;

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

您拥有的其余代码似乎是正确的，因此添加这些代码应该可以解决问题。要记住以下几点：

JS对此处应用的高度没有任何限制，因此即使将窗口调整为10px高度，CSS仍将适用。大多数设计在断开前都有最小高度/宽度，因此在min-height div上使用#background-image可能是个好主意。
在实施之前检查browser support，如果您需要支持其中一个不受支持的浏览器，则需要编写后备或重组代码，使其优雅地降级。 IE9 +，Chrome21 +和FF26 +应该足够好了。
看起来您在主要部分使用了一个spacer来确保页面内容在主滑块之后进入。可以修改页面的结构，以便您不必修改两个元素高度。正如我在开始时提到的，如果重组，你可以使用纯CSS解决方案。

Answer 2

您可以有两种解决方案：

正如Pete所说，你可以使用“background-size”css3，但它不兼容旧浏览器
您可以在$(window).height()和$(window).width

Answer 3

唯一的方法是为您的公司创造一个反复的设计......所有问题都将通过响应式设计来解决......

更改图像大小取决于浏览器窗口大小其他方面
将图像更改为另一个图像

Answer 4

您可以将“background-image”div的高度设置为100％，它将起作用。

检查此代码：

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

窗口大小后的背景图像调整大小

4 个答案: