背景图像按窗口大小调整大小

Background-image resize after window-size

本文关键字：调整 窗口大小 图像 背景      更新时间：2023-09-26

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

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

谢谢，Yngvar

使用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-imagediv上使用min-height可能是个好主意。

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

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

您可以有两个解决方案：

  • 正如Pete所说，你可以使用"背景大小"css3，但它与旧浏览器不兼容
  • 您可以将javascript与$(window).height()和$(window).width一起使用

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

  • 更改图像大小取决于浏览器窗口大小其他
  • 将图像更改为其他图像也是可能的

您可以将"背景图像"div的高度设置为100%，这将起作用。

检查此代码：

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