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

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仍将适用。 大多数设计在打破之前都有最小高度/宽度，因此在#background-image div上使用min-height可能是一个好主意。

• 在实现之前检查浏览器支持 ，如果您需要支持其中一个不受支持的浏览器，则需要编写后备或重构代码，使其优雅地降级。 IE9 +，Chrome21 +和FF26 +应该足够好了。

• 看起来你在主要部分使用了一个spacer来确保页面内容在主滑块之后进入。 可以修改页面的结构，以便您不必修改两个元素高度。 正如我在开始时提到的，如果重组，你可以使用纯CSS解决方案。

Answer 2

你可以有2个解决方案：

• 正如Pete所说，你可以使用“background-size”css3，但它不适合旧版浏览器
• 你可以使用javascript与$(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;
}