Как уменьшить высоту и одновременно сделать его отзывчивым в Bootstrap 4

Question

Я хочу уменьшить высоту изображения так, чтобы оно занимало 75% экрана. Я пробовал использовать высоту: 75%; и class = "h-75", но это, похоже, не работает. Сейчас у меня class = "h-800", а затем h-800 {height: 800px; } но это не делает его отзывчивым.

Отличный пример того, что я хочу: https://heydays.no/

Вот мой HTML:

  <div id="" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="false">
    <div class="carousel-inner">
      <div class="carousel-item active">
          <img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="h-800" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://images.pexels.com/photos/1999463/pexels-photo-1999463.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="h-800" alt="...">
      </div>
    </div>
  </div>

И CSS:

  img {
    height: 75%;
    object-fit: cover;
    width: 100%;
}

.h-800 {
    height: 800px;
}

Answer 1

Вы можете использовать высоту области просмотра.

В этом примере я создаю класс .h75

.h75{
     height: 75vh;
}