Looking for a way to display a full image in a bootstrap carousel. The container should ideally take the full size of the image without cutting it short at the bottom.
.carousel-indicators li{
width: 10px !important;
height: 10px !important;
border-radius: 100% !important;
}
#hero {
position: relative;
}
#course-form{
}
#carousel {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.carousel-inner,
.carousel-item {
height: 100%;
}
.carousel-item {
background: no-repeat center/cover;
background-size: cover;
}
.logo {
height: 30vh;
width: 15vw;
position: relative;
bottom: 100px;
right: 50px;
z-index: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron jumbotron-fluid hero" id="hero">
<div class="container">
<div class="row">
<div class="col-6 mb-4">
<img src="./images/logo.png" class="logo">
<button id="signup"><span id="signup-icon"></span>Sign Up</button>
<button id="signin"><span id="signin-icon"></span>Sign In</button>
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
</div>
</div><!--row for logo,search, and form -->
<!-- Here is the carousel, `position:absolute` -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" style="background-image:url('https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=')"></div>
<div class="carousel-item" style="background-image:url('http://www.electran.org/publication/transactiontrends/wp-content/uploads/intelligence-growth-1050x700.jpg')">
</div>
<div class="carousel-item" style="background-image:url('http://www.globoforce.com/gfblog/wp-content/uploads/2017/02/sprouting-seed.jpg')">
</div>
</div>
</div>
</div><!-- container for top image carousel -->
</div>Tried adjusting the .carousel-inner css properties to fit full size images but not successful so far. Attempts with background-contain and cover have been unsuccessful as well.
Now updated with images for better context.