根據瀏覽器高度調整背景圖片的大小

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);
});