HTML/CSS：IMG 的高度等于文档的高度（不是窗口）

Question

我怎样才能达到这样的效果呢？

Answer 1

对于完整的水平和垂直尝试如下：

background-image: url(image.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;

或者更好地将您的代码发布在 http://jsfiddle.net/ 中

Answer 2

您的问题很可能源于 body 标签是静态定位的，因此其子标签的高度是相对于 html 标签的。

尝试添加此内容：

body{
  position:relative;
}

它将使正文的子级使用文档的大小而不是浏览器视口。

这是它的工作示例： http://jsfiddle.net/cP9hu/

Answer 3

如果有一个原因这不起作用：

CSS Code

    #theImage {
        height: 100%;
    }

然后使用 jQuery 你可以这样做：

    var docHeight = $(document).height();
    $('#theImage').css('height', docHeight);

我不知道如何在普通的旧 JavaScript 中执行此操作，但这就是 jQuery 示例。

Answer 4

这听起来像是必须通过 JavaScript 处理的事情。就我个人而言，我会使用 jQuery 和一些效果：

$(document).ready(function() { //Runs at page load
    $(".ID_OF_IMAGE").each(function() { //calls the anon function for the id tag specified
        /*sets the height to the max of three methods of height measurement
        diff browsers detect doc height differently.*/
        this.height = Math.max(
            //gets the larger between doc height and body height
            Math.max(document.body.clientHeight, document.documentElement.clientHeight),
            Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
            Math.max(document.body.scrollHeight, document.documentElement.scrollHeight))
    });
});

或者，您可以将图像设置为 div 或正文的背景，并使用 Repeat-y css 属性。

body { //also works for div's
    background-image:url('image.jpg');
    background-repeat:repeat-y;
}

-SB