Question

我正在寻求有关如何在任何屏幕分辨率下保持图像适合整个屏幕的帮助。但是图像不是背景。它只是一张封面照片，当您向下滚动时，您将查看网站内容。一个例子就是这个网站：http://riotdesign.eu/en/ 我基本上是在寻找同样的想法。

现在我的div被设置为这些参数。然而，无论我设置为100％还是设置px，图像的高度都会向下延伸。是否可能更容易让内容与底部的图像重叠以隐藏它？请参阅下面的div的css。

#cover{
width:100%;
height: 1000px;
margin: auto;
}

Answer 1

您可以使用：

body {
   background : url("your/image/path") no-repeat center;
}

问题似乎是：您使用的div不会覆盖html文档的完整大小

Answer 2

你想要的是position:fixed：

＆＃13;

* {
    margin:0;
    padding:0;
    left:0;
    top:0;
}
.bgContainer, .bgContainer img {
    width:100%;
    height:100%;
    position: fixed; 
}

＆＃13;

<div class='bgContainer'>
    <img src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg"></img>
</div>

＆＃13;

为方便起见，

Fiddle ：

Answer 3

您可以使用jQuery在调整大小时获取浏览器高度，然后将此高度应用于幻灯片

$(window).height();

这是一个改变div的高度以匹配浏览器大小的小提琴http://jsfiddle.net/hxn9fe5b/

Answer 4

如果我恢复您的问题，您正在搜索＆＃39; Parallax Plugin jQuery ＆＃39;

示例： Simple Parallax Scrolling

如何在每个屏幕分辨率上修复图像？

4 个答案: