Соотношение изображений не такое же, как у окна просмотра. Очень трудно сделать эту работу без использования фона изображений ...
Вам необходимо учесть, чтопроисходит, когда отношения области просмотра и изображения не равны ...
- Хотите ли вы, чтобы изображения обрезались за пределами экрана?
- Уменьшить до ширины экрана или высота (требуется для сохранения соотношения сторон)?
- Растянуть по размеру (в результате чего деформированные изображения теряют соотношение сторон)?
Вариант 1
Чтобы заполнить карусельоставшуюся высоту под этой панелью навигации используйте flex-grow:1. Затем обрежьте стороны изображения, когда они слишком широкие для экрана (ширина области просмотра). Это позволяет изображениям заполнять высоту, но не теряет их пропорции.
Демо: https://www.codeply.com/p/5QnXTjbOFL
CSS
/* make active item container fill height of viewport using flexbox */
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
flex: 1 0 100%;
}
/* fix transitioning item height */
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right,
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
flex: 0 0 0;
}
/* make images fill height and width or clip */
.carousel-item {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.img-1 {
background-image: url(..);
}
.img-2 {
background-image: url(..);
}
HTML
<div class="container-fluid d-flex min-vh-100 flex-column px-0 justify-content-center">
<nav class="navbar navbar-expand-md navbar-light bg-light flex-shrink-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div id="carouselExampleControls" class="carousel slide flex-fill d-flex flex-column justify-content-center" data-ride="carousel">
<div class="carousel-inner flex-fill d-flex flex-column">
<div class="carousel-item active img-1">
</div>
<div class="carousel-item mg-2">
</div>
</div>
</div>
</div>
Вариант 2
Если вам необходимо использовать изображения, вы можете получить object-fit для работы без использования flexbox, который использовался вВариант 1. Используйте calc для определения высоты карусели (минус высота Navbar 56px). Это предотвратит вертикальную полосу прокрутки ...
/* make images fill height and width or clip */
.carousel-item > img {
object-fit: cover;
height: calc(100vh - 56px);
width: 100%;
}
Демонстрация 2: https://www.codeply.com/p/HR6phylC7q
Также см .: Bootstrap Carousel Full Screen