Изменить размер карусели начальной загрузки 4

Question

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<section id="portfolio" class="page-section">
      <div id="reviews" class="container-fluid">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://images.pexels.com/photos/2409628/pexels-photo-2409628.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5>Title</h5>
                <p>Description</p>
              </div>
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>

Существует JSFiddle, если может помочь. https://jsfiddle.net/6bjom57s/

Answer 1

Краткий ответ:

Вы забыли добавить img-fluid к вашим изображениям. Плюс, обычно вы должны установить ширину карусели, а не высоту. Если вы хотите установить его высоту, см. Полный ответ.

Полный ответ:

(Вы можете посмотреть рабочий код здесь: Fiddle )

Во-первых, вы должны добавить .img-fluid к вашим изображениям в карусели, если вы хотите, чтобы они были отзывчивыми.

Во-вторых, обычно вы должны установить width карусели в начальной загрузке. это работает, как вы можете видеть здесь: Fiddle (Но все же это не идеально.)

Но если вы хотите установить высоту карусели, вы можете изменить некоторые стили начальной загрузки:

.carousel-item,
.carousel-inner,
.carousel-inner img {
  height: 100%;
  width: auto;
}

.carousel-item {
  text-align: center;
}

тогда вы можете установить высоту карусели:

.carousel {
  height: 200px;
}

Вы можете посмотреть это здесь: Скрипка

Это не будет обрезать изображения. если вы хотите, чтобы изображения покрывали (а также обрезали), вы можете использовать:

.carousel-inner img {
  width: 100%;
  height: auto;
}

Вы можете увидеть это здесь: Скрипка

Кроме того, вы можете использовать медиа-запросы для его настройки.

И, наконец, вам следует обратиться к jquery и bootstrap.js, если вы этого еще не сделали.

Answer 2

Это похоже на работу:

.carousel-item img {
  max-height: 500px; /* input your desired height here */
}