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

【问题标题】：Particle-JS Responsive canvas height issueParticle-JS 响应式画布高度问题
【发布时间】：2020-02-15 05:15:43
【问题描述】：

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

我将粒子设置在DIV 中，并给它一个带有头像的背景图像。事实是，当我在 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;
}

【问题讨论】：

标签： javascript html css bootstrap-4 particles.js

【解决方案1】：

您可以在#particles-js id 上定义max-width、max-height 和margin: 0 auto 用于居中粒子div。

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

【讨论】：

【解决方案2】：

这对我有用

// the element in which you want to play the particles animation (in my case the body element)
var particleAnimationContainer = document.querySelector('body');

// initialize the dimensions of the animation container; in my case with the avalaible screen dimensions
var screenWIDTH = screen.availWidth;
var screenHEIGHT = screen.availHeight;

particleAnimationContainer.width(screenWIDTH);
particleAnimationContainer.height(screenHEIGHT);

//launch the animation particlesConfig  provided in particles.json      
particlesJS("id-of-body", particlesConfig);

【讨论】：