如何在每个屏幕分辨率上固定图像？

Question

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

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

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

Answer 1

您可以使用：

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

问题似乎是：您使用的 div 没有涵盖您的 html 文档的完整大小

Answer 2

你想要的是position:fixed:

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

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

Fiddle 为了您的方便：

Answer 3

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

$(window).height();

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

Answer 4

如果我继续你的问题，你正在搜索“视差插件 jQuery”

How to fixed image on every screen resolution?