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

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

难道你们都可以检查吗？获得一点帮助会很棒！

感谢， Yngvar

来源

2013-07-18 Yngvar Kalvø

我们可以看到你的一些代码吗？ – Nitesh

取决于浏览器兼容性，你可以看看css3属性background-size – Pete

view-source：http：//momentium.no/ 它在ID为“background-image”的第一个div中。试图在这里复制它，但它是一团糟！ –

使用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可能是个不错的主意。
在实施之前检查browser support，如果您需要支持其中一种不受支持的浏览器，则需要编写回退或重新构建代码，以便优雅地降级。 IE9 +，Chrome21 +和FF26 +应该不错。
看起来您在主要部分中使用了间隔符，以确保页面内容在主滑块之后进入。可以修改页面的结构，以便不必修改两个元素高度。正如我在开始时所提到的，如果您重新构建，您可以使用纯CSS解决方案。

来源

2013-07-18 13:03:02 godfrzero

你可以有2个解决方案：

皮特说，你可以使用 “背景大小” CSS3，但它不会是旧的浏览器
兼容您可以使用JavaScript和$(window).height()和$(window).width

来源

2013-07-18 09:44:41

感谢您的快速响应！我会检查一下，看看它是否有效！ –

的唯一方法是创建为y的repponsive设计我们company..all问题将响应式设计来解决......

改变图像大小取决于浏览器窗口大小的其他明智
改变形象，另外一个也有可能

来源

2013-07-18 10:10:42

这是非常建设性的！对于这样的BS可以随意使用评论。 –

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

检查这个代码：

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

来源

2013-07-18 10:18:05 Harshad

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

回答

相关问题