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

【问题标题】：Resize Background Image according to browser height根据浏览器高度调整背景图像大小
【发布时间】：2013-12-12 06:06:16
【问题描述】：

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

我对它是如何创建的感到好奇。据我所知，很可能是某些 JS 根据浏览器高度对类应用最小高度百分比值。

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

任何意见将不胜感激！

【问题讨论】：

标签： javascript jquery css height min

【解决方案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/

【讨论】：

我应该更具体，尝试调整浏览器高度，您会看到 min-height 属性正在更改。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：