Сделать div высоту отзывчивой при изменении размеров страницы - PullRequest
Новая
       32

Сделать div высоту отзывчивой при изменении размеров страницы

0 голосов
/ 01 мая 2019

У меня есть адаптивный слайдер с полноэкранными изображениями. Когда я изменяю размер страницы, изображения остаются отзывчивыми, но я не знаю, как решить эту проблему. Извините, но я не знаю, как это объяснить, может быть, вы можете выяснить по изображению, которое я добавил. 

<!-- !Showcase -->
  <div id="showcase">
    <i id="arrow-left" class="arrow far fa-arrow-alt-circle-left "></i>
    <div id="slider">
      <div class="slide slide1"></div>
      <div class="slide slide2 "></div>
      <div class="slide  slide3"></div>
    </div>
    <i id="arrow-right" class="far arrow fa-arrow-alt-circle-right "></i>
  </div>


#showcase {
  height: 500px;
  width: 100%;
  position: relative;
}

#slider {
  height: inherit;
  width: 100%;
  overflow-x: hidden;
}

.slide {
  width: 100%;
  height: inherit;
  background-size: contain !important;
}

.slide1 {
  background: url(/Core/img/lazar1.jpg) no-repeat center 10%/cover;
}

.slide2 {
  background: url(/Core/img/lazar2.jpg) no-repeat center 10%/cover;
}

.slide3 {
  background: url(/Core/img/lazar3.jpg) no-repeat center 10%/cover;
}

Ответы [ 2 ]

1 голос
/ 13 мая 2019

Витрина имеет фиксированную высоту, превратите ее в минимальную высоту или удалите, чтобы позволить контейнеру соответствовать его содержимому

0 голосов
/ 01 мая 2019

Как сказал G-Cyr в своем комментарии, ваш элемент контейнера (#showcase) имеет абсолютную высоту 500 пикселей.Именно это блокирует заполнение вашего элемента всякий раз, когда ваш контент будет регулярно превышать 500 пикселей.Если вы хотите, чтобы базовая высота этого контейнера была не менее 500 пикселей, измените height: 500px на min-height: 500px.Это должно сработать.

...