Как отцентрировать изображение с абсолютно чрезмерным промежутком, который отзывчив - PullRequest
Новая
       8

Как отцентрировать изображение с абсолютно чрезмерным промежутком, который отзывчив

0 голосов
/ 13 ноября 2018

Я выдернул свои волосы, пытаясь сделать загрузку для этого адаптивного, а также выглядеть правильно, независимо от размера экрана. Я загрузил сайт в случайный домен, который у меня был:

Тестовый домен

Моя основная проблема заключается в том, что логотип должен быть изображением, а не реальным текстом, и мне нужно, чтобы линия находилась в мертвой точке изображения все время, независимо от экранаразмер, который имеет тенденцию уходить от центра, когда высота становится меньше.Я попытался добавить медиа-запросы в строку для экрана разных размеров, но это не сработало

Редактировать: Поместить код в сообщение также

HTML: 

<!-- Carousel -->

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="4200" data-pause="false">
  <div class="carousel-inner">
    <div class="carousel-item black-fade">
      <img class="d-block w-100 slide-fade" src="/Images/slide-imagery/Warendorf16_02.jpg" alt="First slide">

    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/Images/slide-imagery/AL40028200.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="/Images/slide-imagery/FUSION-230-x-180-H-67a.jpg" alt="Third slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="/Images/slide-imagery/mosaic_anniversary_oro_doppia.jpg" alt="Fourth slide">
      </div>
  </div>
</div>
<div class="title-container">
    <span class="title-underline"></span>
    <h1 class="test2 load-delay"><img src="/Images/Brooklands-Interiors-logo-noBG-noLine.svg" width="500px" class="BI-loadin"></h1>

    </div>
    <p class="title-intro">Showroom now open on Oyster Lane, Brooklands</p>
<div class="arrow-down"><a href="#pull-down"><img src="/Images/arrow-dow.svg" width="40px" class="arrow-bounce"></a></div>

CSS: 

    /* Title load in styling */

.title-container {
    position: absolute;
    width: 50%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    top: 50%;
    display: inline-block;
    left: 50%;
    transform: translate(-50%, -50%);
}

.test2 {
    opacity: 0;
    animation: example2 4s linear;
    z-index: 1000;
    padding-top: 42vh;
  }

  @keyframes example2 {
    0% {padding-top: 47vh;}
    7% {padding-top: 42vh; opacity: 1;}
    85% {padding-top: 42vh; opacity: 1;}
    100% { opacity:0;}
  }


  .title-underline {
    background-color: white;
    height: 8px;
    width: 500px;
    display: block;
    position: absolute;
    transform: scaleX(0);  
    animation: example3 3s linear;
    animation-delay: 1.8s;
    z-index: 200;
    margin-top: 48vh;
    left: 50%;
    margin-left: -250px;
  }

  .title-underline:after {
    padding-bottom: 200px;
  }

@keyframes example3 {
    0% {transform: scaleX(0);}
    10% {transform: scaleX(1);}
    11% {transform: scaleX(1.05);}
    12% {transform: scaleX(1.035);}
    13% {transform: scaleX(1.025);}
    14% {transform: scaleX(1.01);}
    85% {transform:scaleX(1); opacity: 1;}
    100% {opacity: 0; transform:scaleX(1);}
  }

  .title-intro {
      opacity: 0;
      color: white;
      font-weight: 500;
      animation: subtitlefade 4.1s ease-in-out;
      font-size: 1.8rem;
      top: 50%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      animation-delay: 5100ms;
      letter-spacing: .1rem;
      text-align: center;
  }

  @keyframes subtitlefade {
    20% {opacity: 0;}
    30% {opacity: 1;}
    95% {opacity: 1;}
    100% {opacity:0;}
  }

  @keyframes delayedfade {
      100% {opacity: 1;}
  }

  .load-delay {
      animation-delay: 1000ms;
  }
...