javascript - 窗口大小后背景图像调整大小

Question

我是网络开发和网络设计的新手，我现在正在为一家公司 (www.momentium.no) 开发网站。他们想让顶部的背景图像识别浏览器的窗口大小，以便图像填满整个屏幕，并且在您加载网站时向下滚动之前不显示下面的内容。

你们中的任何人都可以检查一下吗？能得到一点帮助真是太好了!

谢谢，英瓦

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 没有对此处应用的高度施加任何限制，因此即使窗口大小调整为 10 像素高度，CSS 仍将应用。大多数设计在中断前都有最小高度/宽度，因此在 #background-image div 上使用 min-height 可能是个好主意。

  <

• 检查 browser support在实现之前，如果您需要支持其中一种不受支持的浏览器，则需要编写回退代码或以优雅降级的方式重组代码。不过 IE9+、Chrome21+ 和 FF26+ 应该足够好。

• 看起来您在主要部分中使用了间隔符以确保页面内容出现在主要 slider 之后。可以修改页面的结构，这样就不用修改两个元素的高度了。正如我在开头提到的，如果您进行重构，您可能可以使用纯 CSS 解决方案。