Question

实现某些方面有点麻烦。我想要一个带有导航标题的页面，然后我希望页面的其余部分成为填充视口的图像。

目前我有这样的事情

<header id="header" class="header-default">
   ...nav items
</header>

<div id="contents"></div>

在我的CSS中我做了

#header.header-default{
    height: 100px;
    padding-top:10px;
    padding-bottom:10px;
}

#contents{
    background: url('images/home.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

然后我最后有一些javascript来设置内容的高度。

jQuery(function() {
    setHeight();

    jQuery(window).resize(function() {
        setHeight();
    });
});

function setHeight() {
    windowHeight = jQuery(window).innerHeight()-120;
    jQuery('.home #contents').css('min-height', windowHeight);
};

现在它有点工作，它适合视口，因为它应该做。然而，图像是一个人，它削减了额头的顶部。有没有办法让图像显示完美？如果由于比率（我认为正在发生）而不能选择视口大小，那么我不介意正常显示它。

由于

Answer 1

感觉像一个熟悉的问题。我认为它确实是比率不匹配（图像与视口/包含元素）。

如果内存有效，您可以使用填充进行调整以获得要显示的内容。

查看Nicholas Gallagher的Flexible CSS Cover Images demo

关键位是：

更改填充值将更改宽高比。例如，25％的填充导致纵横比为4：1，填充为33.333％导致纵横比为3：1等。

另外，要记住一点需要注意（毕竟CSS破解）：

使用此宽高比黑客的问题是，如果元素声明了max-height，则不会被尊重。为了解决这个问题，可以将hack应用于伪元素。

Answer 2

background-size: cover和background-attachment: fixed的组合是导致问题的原因。除了background-attachment: fixed可能会导致动画性能下降，因为背景会一直重新绘制。要获得所需的结果，请使用带有position: fixed - fiddle的:: before伪元素。

btw - 这样你也可以删除高度改变脚本，因为背景总是100％可用高度;

body::before {
    display: block;
    position: fixed;
    top: 120px; /** so it will be under the header **/
    right: 0;
    bottom: 0;
    left: 0;
    background: url('http://blog.homerealestate.com/wp-content/uploads/2010/04/Person.Ashley.jpg') no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    content:'';
}

#contents {
    position: relative;
    z-index: 10; /** above the background **/
}

创建视口的标题和div高度

2 个答案: