Содержит текст внутри элемента div, для которого задано значение «соответствие объекта: содержать» независимо от размеров экрана - PullRequest
Новая
       13

Содержит текст внутри элемента div, для которого задано значение «соответствие объекта: содержать» независимо от размеров экрана

0 голосов
/ 27 сентября 2018

Я пытаюсь добавить 3 слайд слайдера в верхней части страницы.Каждое изображение является ссылкой и имеет два текстовых поля, относящихся к нему.Один, который отображается в верхней части изображения, а другой в синем поле, прямо под ним.У меня две проблемы:

  1. Слайды должны быть абсолютными, поэтому все они отображаются в одном и том же месте.Я обернул абсолютные слайды в относительном div, думая, что это поместит остальную часть страницы после слайдов, но она все еще идет позади нее, а не под ней.Я понимаю, почему это происходит (абсолютное позиционирование изображения означает, что относительный div не имеет высоты), но не знаю, как я мог бы добавить соответствующие отступы, которые соответствуют высоте thr изображения на всех размерах экрана.
  2. Поскольку изображение установлено в соответствии с размером объекта: содержать, изображение не всегда занимает всю ширину экрана, но два текстовых поля позволяют, то есть они часто не содержатся в пропорциях изображения.Мне нужно как-то связать ширину изображения с шириной текстового поля, чтобы оно отображалось точно с той же шириной, что и изображение.

Вот мой код. 

jQuery(document).ready(function($) {
  var current = 0,
    slides = document.getElementsByClassName("feature-slide");
  copy = document.getElementsByClassName("feature-copy");

  setInterval(function() {
    for (var i = 0; i < slides.length; i++) {
      slides[i].style.opacity = 0;
      $(slides[i]).css('pointer-events', 'none');
      copy[i].style.display = "none";
    }
    current = (current != slides.length - 1) ? current + 1 : 0;
    slides[current].style.opacity = 1;
    $(slides[current]).css('pointer-events', 'auto');
    copy[current].style.display = "block";

  }, 1000);

});
#slideshow {
  position: relative;
  max-height: 80vh;
}

.slider-image {
  position: relative;
}

img {
  object-fit: contain;
  width: 100vw;
  max-height: 80vh;
}

.feature-slide {
  position: absolute;
}

.feature-copy {
  z-index: 700;
  position: absolute;
  top: 5em;
  left: 10em;
}

.feature-text {
  background-color: #1d9cd9;
  width: 100vw;
  position: absolute;
  top: 100%;
  ;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slideshow">
  <div class="feature-slide">
    <a href="#">
      <img src="https://via.placeholder.com/600x300" alt="">
    </a>
    <div class="feature-copy">
      <p>Attention Grabber 1</p>
    </div>
    <div class="feature-text">
      <p>product one</p>
    </div>
  </div>

  <div class="feature-slide">
    <a href="#">
      <img src="https://placeimg.com/600/300/tech" alt="">
    </a>
    <div class="feature-copy">
      <p>Attention Grabber 2</p>
    </div>
    <div class="feature-text">
      <p>product two</p>
    </div>
  </div>

  <div class="feature-slide">
    <a href="#">
      <img src="https://placeimg.com/600/300/arch" />
    </a>
    <div class="feature-copy">
      <p>Attention Grabber 3</p>
    </div>
    <div class="feature-text">
      <p>product three</p>
    </div>
  </div>
</div>

<div class="main-body">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat exercitationem culpa velit illo amet fugit reprehenderit fugiat animi beatae voluptatem dolorum repellat, voluptatum inventore hic maiores minima tempore facilis aliquam.
</div>
...