使英雄形象响应

Question

我正在尝试让我的主页上的主图具有响应性，适用于桌面和移动设备。现在，它卡在页面的第二部分（在它下面），我尝试了不同的可能性来重新定位它，但我无法将它放在 masterhead 的中心......任何提示将不胜感激，我不知道该做什么或我做错了什么:-/

这是 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 使图像响应。它 class=img-fluid 并将您的图像定位到页面的中心，您可以将其应用于图像

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

使英雄形象响应

Making hero image responsive

html

css

image

responsiveness

bootstrap-4