Как задать высоту слайдера по высоте и ширине на всё активное окно?

Question

[Сергей Фролов]

Как задать высоту слайдера по высоте и ширине на всё активное окно? Что бы при уменьшении или увеличении окна браузера изображение обрезалось, а слайдер подстраивался под окно вот здесь я это увидел https://bridge198.qodeinteractive.com/

Comments

[Ankhena]

Используйте единицы измерения vh и vw
Если в слайдах картинки, то object-fit, если фон, то background-size.

Что вам еще без кода можно сказать...

[Сергей Фролов]

Ankhena,

<!-- one slider -->
    <div class="header_slider">
      <div>
        <div class="header_slider__block">
          <img src="slick/img/1.jpg" alt="#" class="slider__img">
          <div class="header-slider__content">
            <div class="container">
              <h2 class="slider__title">Header 1</h2>
              <p class="slider__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima consectetur
                aspernatur dolore beatae, repellat vero repellendus obcaecati perferendis, aliquid saepe.</p>
            </div>
            <!-- /.container -->
          </div>
          <!-- /.my-slider__content -->
        </div>
      </div>
      <div>
        <div class="header_slider__block">
          <img src="slick/img/2.jpg" alt="#" class="slider__img">
          <div class="header-slider__content">
            <div class="container">
              <h2 class="slider__title">Header 2</h2>
              <p class="slider__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, odit temporibus
                non
                libero eligendi reprehenderit deleniti tempore? Dolorum, fugit, labore.</p>
            </div>
            <!-- /.container -->
          </div>
          <!-- /.my-slider__content -->
        </div>
      </div>
      <div>
        <div class="header_slider__block">
          <img src="slick/img/3.jpg" alt="#" class="slider__img">
          <div class="header-slider__content">
            <div class="container">
              <h2 class="slider__title">Header 3</h2>
              <p class="slider__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quia, possimus
                aperiam eos voluptas in cumque rerum nobis dolorem quod.</p>
            </div>
            <!-- /.container -->
          </div>
          <!-- /.my-slider__content -->
        </div>
      </div>
    </div>
    <!-- /.header_slider -->

.header_slider {
  max-width: 100%;
  height: auto;
  margin: 0;
}

.header_slider__block {
  margin: 0px;
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
}

.slider__img {
  width: 100%;
  filter: blur(0) brightness(40%);
  /* opacity: 0;
  animation: hideImage .5s; */
  /*    animation: hideImage .5s, scaleBackImage .5s forwards; */
}

.slider__title,
.slider__text {
  font: 4em Arial, sans-serif;
  color: rgb(250, 245, 245);
  margin: 15px 0;
}

.header-slider__content {
  position: absolute;
  height: auto;
  display: flex;
  /* align-items: center; */
  flex-flow: column nowrap;
  /* justify-content: center; */
}

.slider__text {
  margin: 0 auto;
  font: 2em Arial, sans-serif;
  text-align: center;
  animation: hideImage .7s, scaleBackImage .5s forwards;
}

.slider__title {
  margin-bottom: 20px;
  animation: hideImage .5s, scaleBackImage .4s forwards;
}

.slick-active .slider__title {
  animation: bounceInRight 1.5s both 1.5s;
}

.slick-active .slider__text {
  animation: bounceInUp 1.5s both .5s;
}

@media (max-width:767px) {
  .header_slider {
    margin-top: 50px;
  }

  .slider__title {
    font: 1.5em Arial, sans-serif;
  }

  .slider__text {
    font: 1.1em Arial, sans-serif;
  }
}

/* .slick-active .slider__img {
  animation: showImage .8s .5s forwards, scaleImage .5s .5s forwards;
} */

@keyframes showImage {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@keyframes hideImage {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes scaleImage {
  0% {
    transform: scale(0);
    transform-origin: center;
  }

  100% {
    transform: scale(1);
    transform-origin: center;
  }
}

@keyframes scaleBackImage {
  0% {
    transform: scale(1);
    transform-origin: center;
  }

  100% {
    transform: scale(0);
    transform-origin: center;
  }
}

[Ankhena]

Сергей Фролов, супер простыня.

Вот ваш код https://jsfiddle.net/pnhc478y/

Используйте рекомендации из моего первого поста и организуйте песочницу с видимой проблемой jsfiddle.net или codepen.io,

Answer 1

[Тимофей Михайлов]

У блока, который должен быть на всю высоту окна браузера прописать класс ?
height: 100vh;

Comments

[Сергей Фролов]

Спасибо всё получилось сколько оказывается всё так посто))ю Спасибо.

[Тимофей Михайлов]

Сергей Фролов, Пожалуйста. Только если я не ошибаюсь, некоторые браузеры не поддерживают vh.
Вот, для справки - туть

[Сергей Фролов]

Тимофей Михайлов, на всех телефонах и планшетах (андроды, айфоны) которые у меня есть дома полёт нормальный я этого и добивался))

Answer 2

[shva099]

В решении надо использовать и js и css. Вот еще один пример такого сайта https://www.progress-nn.ru/. Посмотрите в нем код.