Javascript 粒子高度问题

我一直在使用一个Bootstrap公文包，试图在个人资料图片中使用particle.js

我将粒子设置在一个

DIV

中，并给它一个带有轮廓照片的bg图像。事实上，当我在XL屏幕上重新加载屏幕，并将屏幕大小调整为XL>lg>md时，它保持良好状态。但是当屏幕大小增加到md>lg>xl时，画布高度不会根据其父级而降低。请帮忙

以下是链接：

画布高度问题

您可以在

#particles js

id上定义

最大宽度

、

最大高度

和

边距：0自动

，以使粒子div居中

---

这是对我有用的

//要在其中播放粒子动画的元素（在我的示例中为body元素）
var particleAnimationContainer=document.querySelector（'body'）；
//初始化动画容器的尺寸；在我的例子中，可用的屏幕尺寸
var screenWIDTH=screen.availWidth；
变量screenHEIGHT=screen.availHeight；
particleAnimationContainer.width（屏幕宽度）；
particleAnimationContainer.高度（屏幕高度）；
//启动particles.json中提供的动画particlesConfig
particlesJS（“主体id”，particlesConfig）
<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;
}

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