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%)
}

使英雄形象响应

1 个答案: