Particle- JS Отзывчивый вопрос высоты холста - PullRequest
Новая
       11

Particle- JS Отзывчивый вопрос высоты холста

0 голосов
/ 15 февраля 2020

Я работал с портфелем Bootstrap, где я пытаюсь использовать частицу. js на изображении профиля.

Я установил частицы внутри DIV и дал ему bg -изображение с фотографией профиля. Дело в том, что когда я перезагружаю экран на экране XL и изменяю размер экрана до xl> lg> md, он остается в порядке. Но когда размер экрана увеличился до md> lg> xl, высота холста не уменьшается в соответствии с его родителем. ПОМОГИТЕ!

Вот ссылка:

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

Высота полотна

enter image description here 

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

1 Ответ

0 голосов
/ 15 февраля 2020

Вы можете определить max-width, max-height и margin: 0 auto для #particles-js id для центрирующего делителя частиц. 

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