How To Make Navbar And Carousel Combined Always Full Screen
I want to have a nav-bar at the top of my page. Below that I want my carousel which should always take up the entire remaining screen. This is my navbar:
Solution 2:
Image ratio isn't the same viewport ratio. It very difficult to make this work without using background images...
You need to consider what happens when the viewport and image ratios are not equal...
- Do you want the images to be clipped off screen?
- Shrink to fit screen width or height (required to maintain aspect ratio)?
- Stretch to fit (resulting in warped images that lose aspect ratio)?
Option 1
In order to make the carousel fill the remaining height under that navbar, use flex-grow:1. Then, clip the image sides when they're too wide for the screen (viewport width). This allows the images to fill height, but not lose their aspect ratio.
Demo: 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>
Option 2
If you must use images, you can get object-fit to work without using the flexbox that was used in Option 1. Use calc to determine the height of the carousel (minus the Navbar height of 56px). This will prevent vertical scrollbar...
/* make images fill height and width or clip */
.carousel-item > img {
object-fit: cover;
height: calc(100vh - 56px);
width: 100%;
}
Demo 2: https://www.codeply.com/p/HR6phylC7q
Also see: Bootstrap Carousel Full Screen
Post a Comment for "How To Make Navbar And Carousel Combined Always Full Screen"