javascript - 调整大小时动态更改div的高度

Question

我一直想弄清楚这个网站是如何做出如下效果的，但我找不到答案。

https://www.dezeynne.com/

似乎在调整浏览器窗口大小时，主 div 也通过更改高度动态地调整了大小。

我的数学也很差，所以请帮助我理解这个很棒的效果背后的想法。 如果能帮我弄清楚视差是如何工作的，我的意思是如何在调整浏览器窗口大小时更改 css/javascript 中背景的位置。

$(document).ready(function() {
   var $window = $(window);
   var $welcomeElement = $(".welcome");
   var defaultHeight = $welcomeElement
   console.log($welcomeElement);
   $window.resize(function() {
      // I'm stuck here at math as you see
      $welcomeElement.css("height", ($window.width() - $window.height()) - 
      $welcomeElement.innerHeight());
      console.log("Resized!");
      console.log($window.height());
   });
});

Answer 1

您是否考虑过使用 viewport units ？

将div设置为height:50vw;

#main {
background:#daa;
height:50vw;
color:#400;
font-size:10vw;
text-align:center;
line-height:50vw;
}

<div id="main">Hello</div