动态调整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