放置视差悬停层

Question

我正在自学如何使用5层创建视差悬停图像，效果很好，并且可以调整各层的大小，但是在定位方面遇到了麻烦。

将大小调整为150vw / vh时，这些层会溢出底部和右侧。我已经尝试了一些方法，但是不确定是否将css属性放在正确的位置。中心位置为100vh / vw，但对于我的标头来说太小了。

我应该放置在#scene还是.img中？对于这种事情，最佳实践是什么？

这是我到目前为止所拥有的：

<div class="section--parallax">

<div id="scene">
  <div data-depth="0.2">
  <img src="resources/img/layer1.png">
  </div>
  <div data-depth="0.6">
  <img src="resources/img/layer2.png">
  </div>
  <div data-depth="0.3">
  <img src="resources/img/layer3.png">
  </div>
  <div data-depth="0.6">
  <img src="resources/img/layer4.png">
  </div>
  <div data-depth="0.2">
  <img src="resources/img/layer5.png">
  </div>

</div>

</div>

CSS

header {
    background-size: cover;
    background-position: center;
    height: 100vh;
    background-attachment: fixed;

}

#scene {


}

.section--parallax img {
    width: 150vw;
    height: 150vh;

}

JS

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);