Bootstrap карусель размер изображения

Question

Привет, есть проблема с изменением размеров изображений карусели, 7 из них имеют горизонтальный размер (1800x1200), но одно - последнее - вертикальное, и я не могу правильно его кодировать, чтобы оно было отзывчивым:

https://www.luismatera.art/refugio.html

Код для карусели:

            <div class="row">
                <div class="col-md-1 hidden-xs"></div>
                <div class="col-md-10 col-xs-12 col-sm-12">
                
                <div id="carouselExampleControls" class="carousel slide carousel-fade" data-ride="carousel" data-interval="10000">
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <img src="img/refugio/01.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="img/refugio/02.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="img/refugio/03.jpg" class="d-block w-100" alt="...">
                    </div>                    
                    <div class="carousel-item">
                      <img src="img/refugio/04.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="img/refugio/05.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="img/refugio/06.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="img/refugio/07.jpg" class="d-block w-100" alt="...">
                    </div>
					<div class="carousel-item" align="center">
                      <img src="img/refugio/08.jpg" class="d-block img-fluid" alt="...">
                    </div>		


                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>

                    <p>Proyecto abierto</p>
                    <p align="right">Asturias · 2017/18</p>
                </div>

                 <div class="col-md-1 hidden-xs"></div>

        </div>

Я заменил class = "d-block w-100 " на class = "d-block img-Fluid"

Буду признателен за любую помощь: -)

Заранее спасибо, Луис

Answer 1

.carousel-fade .carousel-item, .carousel-item img  {
  max-height: 90vh;
}

исправляет это.Он просто устанавливает max-height любого .carousel-item на максимум 90% высоты области просмотра, что, по-видимому, является тем, к чему вы стремитесь.

Очевидно, вы можете настроить его так, чтобы это имело смысл для вашего проекта (может быть 85vh?).