使背景图像占视口的 100%

Question

我正在寻找一种解决方案，使我的打开背景图像成为 100% 的视口。使用 Josh powel 的答案后，它可以在 Mac 上的 Chrome 上运行，但不能在任何其他浏览器上运行（无论是 Mac 还是 Windows）。

当我说“它适用于 Mac 上的 Chrome”时，意味着它适用于大多数情况。但是，如果我将浏览器拉伸得太高，它就无法覆盖，我就会看到下一部分内容。

所以看起来它只适用于高度达到 x...

这是我的代码（Fiddle here）。

HTML：

<section class="intro">
    <div class="intro-body">
    
    </div>
</section>

CSS：

.intro {
    display: table;
    width: 100%;
    height: 100%;
    padding: 350px 0 330px;
    text-align: center;
    color: #fff;
    position: relative;
    background: url(http://www.example.com/example.jpg) no-repeat center;
    background-size:cover;
}

.intro-page {
    padding: 150px 0 130px;
    background: url(http://www.example.com/example.jpg) no-repeat center;
    background-size: cover;
}

还有 jQuery：

function windowH() {
    var wH = $(window).height();

    $('.intro, .intro-page').css({height: wH});
}

如果有人能提供任何线索，那就太好了。

Answer 1

为了使元素占页面的 100% 高度，您还必须具有：

html,body { height: 100%; min-height: 100%; }

在 CSS 中执行此操作比使用 JS 更好、更可靠。

或者，您可以将背景图像放在身体上（像您正在使用的那样使用

background-size: cover

）。