Question

如何完成与此类似的英雄单位： http://tribalmedia.co.uk/

我对这是如何被创造的更好奇。到目前为止，我可以说它很可能是某些JS根据浏览器高度将最小高度百分比值应用于该类。

编辑：尝试调整浏览器高度，您会看到正在更改min-height属性。

非常感谢任何输入！

Answer 1

请阅读CSS：

.site-header {
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFF;
    min-height: 618px;
    position: relative;
}

演示：http://jsfiddle.net/qwertynl/5a343/

Answer 2

它只是css的东西。以下是特定网站使用的CSS。

.site-header { background-position: center bottom; background-repeat: no-repeat; background-size: cover; color: #FFFFFF; min-height: 618px; position: relative; }

Answer 3

我能够使用此Javascript解决我的问题！

function resizeHero() {
    var windowHeight = $(window).height(),
    heroUnit = $(".hero-unit");
    heroUnit.css({
        minHeight: windowHeight
    });
}

$(document).ready(function() {
    resizeHero();
    $(window).on("resize", resizeHero);
});

根据浏览器高度调整背景图像大小

3 个答案: