jquery - 如何使英雄部分始终填满浏览器窗口？

Question

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

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

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

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

Answer 1

简单地说，使用视口(viewport)的宽度和高度:

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

设置视口(viewport)元标记是个好主意:

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