Particle-JS Problema all'altezza della tela reattiva

2020-02-15 javascript html css bootstrap-4 particles.js

Ho lavorato con un portfolio Bootstrap in cui sto cercando di utilizzare particle.js nella foto del profilo.

Ho inserito le particelle all'interno di un DIV e gli ho dato un'immagine bg con la foto del profilo. Il fatto è che, quando ricarico lo schermo sullo schermo XL e ridimensiono lo schermo in xl> lg> md, rimane bene. Ma quando la dimensione dello schermo aumenta a md> lg> xl, l'altezza della tela non diminuisce in base al suo genitore. Per favore aiuto!

Ecco il link:

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

Problema relativo all'altezza della tela

inserisci qui la descrizione dell'immagine

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

Answers

È possibile definire la max-width max-height e il margin: 0 auto su #particles-js id per centrare div di particelle.

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

Related