javascript - Particle-JS 响应式画布高度问题

Question

我一直在使用 Bootstrap 产品组合，我试图在个人资料图片上使用particle.js。

我将粒子设置在 a 中DIV，并给它一个带有头像的 bg-image。事实是，当我在 XL 屏幕上重新加载屏幕并将屏幕大小调整为 xl > lg > md 时，它保持正常。但是当屏幕尺寸增加到 md > lg > xl 时，画布高度不会根据其父级而减小。请帮忙！

链接在这里：

https://sabbir030.github.io/portfolio/

画布高度问题

<header id="main-header">
    <!-- full row for image to the left and others to the right -->
    <div class="row no-gutters">
      <!-- images to the left with 4 col -->
      <div class=" col-md-5 col-lg-4">

       <!-- PARTICLE JS WITH PROFILE PICTURE -->

        <div id="particles-js"></div>

      </div>

      <!-- Name and Menu to the right with 8 col -->
      <div class=" col-md-7 col-lg-8">

      </div>
    </div>
  </header>

#particles-js {
    width: 100%;
    height: 100%;
    background-color: #b61924;
    background-image: url('../img/profile.jpg');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

标签： javascripthtmlcssbootstrap-4particles.js

Answer 1

您可以定义max-width,max-height和idmargin: 0 auto以#particles-js使粒子 div 居中。

#particles-js {
  max-width: 380px;
  max-height: 401px;
  margin: 0 auto;
}