1

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

你们中的任何人都可以检查一下吗？能得到一点帮助会很棒！

谢谢， 英格瓦尔

4

4 回答 4

3

使用 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在您的#background-imagediv 上使用 a 可能是个好主意。

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

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

于 2013-07-18T13:03:02.257 回答
0

您可以有 2 个解决方案：

  • 正如皮特所说，您可以使用“背景大小”css3，但它与旧版浏览器不兼容
  • 您可以使用 javascript$(window).height()和$(window).width
于 2013-07-18T09:44:41.437 回答
0

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

  • 更改图像大小取决于浏览器窗口大小 否则
  • 也可以将图像更改为另一个图像
于 2013-07-18T10:10:42.890 回答
0

您可以将“背景图像”div 的高度设置为 100%，它会起作用。

检查此代码：

#background-image {
width: 100%;
height: 100% !important;
position: absolute !important;
overflow: hidden;
text-align: center;
background: #000;
}
于 2013-07-18T10:18:05.360 回答