Делаем образ героя отзывчивым

Question

Я пытаюсь сделать изображение героя отзывчивым на главной странице, для настольных компьютеров и мобильных устройств. Прямо сейчас он застрял во втором разделе страницы (под ним), я пробовал разные возможности переместить его, я не смог центрировать его на главном блоке ... Любые советы будут с благодарностью, я не знаю, что делать или что я делаю не так: - /

Вот HTML:

<!-- Masthead -->
  <header class="masthead bg-primary image-center">
    <div class="container d-flex align-items-center flex-column">

    <!--Background Particles-->
      <div id="particles-js"></div>

      <!--Hero Image-->
      <img class="masthead-logo mb-5" src="https://pandassi.github.io/website.github.io/hero.png" alt="Lila Ait">

</div>

  </header>

А для CSS:

.bg-primary {
  background: radial-gradient(#49a7b7, #293f50) !important;
  height: 35em;
}

Тогда:

/*Just for info, I am using a Boostrap framework, not sure the purpose of mb-5 but I didn't want to mess with it*/

.mb-5,
.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem 

И чуть дальше:

#particles-js {
  width: 80rem;
  height: 35em;
  margin-top: -12.5rem !important;
}

.masthead {
  padding-top: calc(6rem + 74px);
  padding-bottom: 6rem;
}

.masthead .masthead-heading {
  font-size: 2.75rem;
  line-height: 2.75rem;
}

.masthead .masthead-subheading {
  font-size: 1.25rem;
}

.masthead .masthead-logo {
  width: 25rem;
}

.masthead-logo {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}


@media (min-width: 992px) {
  .masthead {
    padding-top: calc(6rem + 104px);
    padding-bottom: 6rem;
  }
  .masthead .masthead-heading {
    font-size: 4rem;
    line-height: 3.5rem;
  }
  .masthead .masthead-subheading {
    font-size: 1.5rem;
  }
  .masterhead-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  }
}

Answer 1

В Bootstrap для создания адаптивного изображения есть класс. Это class=img-fluid, и чтобы расположить ваше изображение в центре страницы, вы можете применить это к изображению

img{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)
}