调整

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;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;