动态调整div的高度，同时调整大小

我一直在试图弄清楚这个网站如何产生以下效果，我无法找到答案。动态调整div的高度，同时调整大小

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()); 
    }); 
});

来源

2017-08-15 Mustafa Najjar

了解CSS媒体查询 – 2017-08-15 19:51:20

您是否考虑过使用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

来源

2017-08-15 19:51:14 jayms

它的工作原理！但如何使用JavaScript做到这一点？以及如何处理paralax效应？任何想法都会有所帮助 –

将窗口的宽度乘以0.5的比率，并且不要忘记添加单位，例如'+“px”'。可以使用[background-position]完成paralax效果（https://www.w3schools.com/cssref/pr_background-position.asp） – jayms

好的，谢谢你的帮助。如果我有问题，我认为问题已解决，并会与您联系。 –

动态调整div的高度，同时调整大小

回答

相关问题