Сапоги карусели: снимите нижний край

Question

here's the site. Если вы измените размер окна на меньший размер. Вы заметите, что есть нижнее поле/обивка, вызванное

.carousel-inner { 
    background-color: #03324c; 
} 

Я мог бы удалить это, но показатели не будут видны и там будет пустой промежуток в нижней части. Я знаю, что изображения имеют разный размер, я попробовал изменить размер, такую ​​же проблему. Я пробовал много вещей в течение 2 дней, ничего не работало.

.carousel-inner { 
    background-color: #03324c; 
} 
.carousel-inner img { 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: auto; 
    opacity: 0.7; 
    width: 100vw; 
    height: auto; 
    max-height: 100vh; 
    bottom: 0; 
} 
.carousel-caption h3 { 
    color: #fff !important; 
} 

Answer 1

Вы бы лучше с помощью background-image в сочетании с background-size:cover на .item элементов.

Например, ваш первый пункт изменится на это (просто удалить img тег):

<div class="item" style="min-height: 710px;"> 
    <div class="carousel-caption"> 
    <h3>New York</h3> 
    <p>The atmosphere in New York is lorem ipsum.</p> 
    </div> 
</div> 

И стиль для соответствующего .item элемента будет таким:

.item { 
    background-image: url(images/medium/quote.png); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; 
}