如何让英雄部分总是填满浏览器窗口？答案

【问题标题】：How to make the hero section always fill browser window?如何让英雄部分总是填满浏览器窗口？
【发布时间】：2018-09-03 19:37:10
【问题描述】：

我想知道如何将英雄图像填充到浏览器视口中。这样英雄部分的高度总是视口的高度。

我想出了以下代码，但它不起作用：

function resizer() {
  var fulls = $('#hero');
  console.log(fulls);
  var win = $(window);

  resize.on(function() {
    fulls.height(win.height());
  });
};

【问题讨论】：

标签： jquery css fullscreen viewport

【解决方案1】：

简单地说，使用视口的宽度和高度：

fulls.style.height = "100vh"; //which means 100% of the viewport height, same works for width

设置视口元标记是个好主意：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

【讨论】：

【解决方案2】：

在这里试试这个代码http://jsfiddle.net/F7AN5/2/

HTML：

<div id="hero">
      <img src="http://www.thememorist.com/wp-content/uploads/2012/03/superhero-blank1.jpg" alt=""/>
</div>

CSS：

body{
    padding:0;
    margin:0;
}
img{
    display:block;
}

jQuery

$(document).ready(function(){
var resizeHero = function()
    {
      var hero = $("#hero"), window1 = $(window);
        hero.css({
            "width": window1.width(),
            "height": window1.height()
        });

        if(window1.width() < window1.height())
        {
             hero.find("img").css({
            "width": window1.width(),
            "height": "auto"
            });        
        }
        else
        {
             hero.find("img").css({
             "height": window1.height(),
             "width": "auto"
            });            
        }
    };

    resizeHero();

    $(window).resize(function(){
      resizeHero();    
    });
});

【讨论】：

【解决方案3】：

尝试使用：

$(window).resize(function() {
    $('#hero').height($(window).height());
}).resize();

【讨论】：

它工作正常。伟大的。一样东西。现在用户必须调整窗口大小才能使代码生效。当我删除“resize()”函数时。它也有效。但是我应该如何编写代码才能同时执行这两个功能？@Felix