显示全屏图像 100% 高度和 100% 宽度但能够向下滚动答案

【问题标题】：Display a full screen image 100% height and 100% width but able to scroll down显示全屏图像 100% 高度和 100% 宽度但能够向下滚动
【发布时间】：2016-02-25 03:31:58
【问题描述】：

我想创建一个全屏图像，让我可以像这里的苹果网站一样向下滚动页面。

http://www.apple.com/uk

您会注意到，通过调整浏览器大小，图像会保持全屏显示，但它允许您向下滚动到页脚。

这可以在 jquery 中完成还是需要 javascript？

到目前为止，我唯一的代码是使图像全屏显示的 css 代码：

.content {
    height:100%;
    width:100%;
    background: url("http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

这是一个小提琴http://jsfiddle.net/XXHgJ/

如果您向下滚动页脚显示但菜单保持不动，则需要向上滚动。

【问题讨论】：

什么菜单保持不动？我只看到背景和页脚
Apple 已将图像放置在 div 中，然后使用 css 定位来放置顶部菜单。一旦图像在 div 中，您将处理 div 元素而不是图像作为背景...如果您将图像发送到背景，它将对滚动没有影响
@pete，很抱歉造成混淆，我希望在页脚向上滑动时图像向上滑动。

标签： javascript jquery

【解决方案1】：

如果你只想制作一个全屏元素，你可以用 jQuery 来做：

jQuery：

function setDimensions(){
   var windowsHeight = $(window).height();
   $('#element').css('height', windowsHeight + 'px');
}

//when resizing the site, we adjust the heights of the sections
$(window).resize(function() {
    setDimensions();
});

setDimensions();

CSS

.content {
    background-image: url(yourURL);
    background-size:cover;

}

现场演示：http://jsfiddle.net/XXHgJ/7/

【讨论】：

谢谢你的回复，我上周才开始学习jquery，你的脚本对我来说还是有点高级，有没有机会更新我的小提琴，我试过了，但是没运气。这是我的努力jsfiddle.net/XXHgJ/5。根据我对您的代码的理解，变量 windowsheight 是浏览器的高度，宽度呢？第二部分在css中添加高度，最后一点让我感到困惑......
感谢您的提琴，但它不太正确，图像似乎没有拉伸全屏，并且当页脚向上滚动时它不会滚动
因为你的 CSS。您应该删除背景的fixed 位置并添加background-size: cover，如果您希望背景填充div：jsfiddle.net/XXHgJ/7
非常感谢，我在jsfiddle.net/XXHgJ/12 稍微编辑了代码，所以图像保持在中间，但现在可以正常工作了，谢谢。

【解决方案2】：

是这样的吗？...我用纯 css 做了这件事，我仔细注意到在苹果的页面调整大小时，图像大小不一定会改变。

<div>

    <div style="position:relative; background:green; ">
     <div style="position:absolute; top:30px; left:50px; margin:auto; width:250px; height:40px; text-align:center; padding-top:10px; background:black; color:#fff;">Menu goes here</div>
        <div><img src="http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg" height="400" /></div></div>

    <div style="background:#fff; padding:30px;">Footer</div>


</div>

见 Feddle：http://jsfiddle.net/HZbAt/

希望对你有帮助

【讨论】：

感谢您的提琴，但它不太正确，图像似乎不是全屏，也不会滚动。
当然是...您可以使用 css 或 jQury 让图像的高度或宽度为 100%...注意苹果图像是高质量的非常大的图像...如果您得到这样一个矩形的图像，就像苹果使用的那样......我发送给你的代码应该可以完美地工作......

【解决方案3】：

在我的页面上，我的 margin-top 80px 将内容向下推是他们可以添加到代码中的任何内容，所以这不会像 -80px 那样发生吗？这是针对 jquery 脚本的

【讨论】：