Particle-JS Responsive canvas height issue

Question

I've been working with a Bootstrap portfolio where I am trying to use particle.js on the profile picture.

I set the particles inside a DIV and gave it a bg-image with profile photo. The fact is, when I reload the screen on XL screen and resize the screen to xl > lg > md, it stays fine. But when The screen size increased to md > lg > xl, the canvas height doesn't decrease according to its parent. Please HELP!

Here is the link:

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

Canvas Height Issue

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

Answer 1

You can define max-width , max-height and margin: 0 auto on #particles-js id for centering particle div.

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

Answer 2

Here's what worked for me

 // 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);