How to make images fit carousel containers? - css

Question

I am trying to make all the images of different heights and widths within the carousel the same height matching the size of the carousel container '.carouselWrapper'
https://codepen.io/SashaSashaSasha/pen/MWgepEe
HTML
<div class="carouselWrapper">
<div class="carousel">
<div><img src="https://trendland.com/wp-content/uploads/2019/01/Myles_Pedlar_3.jpg"></div>
<div><img src="https://1aike31wshtt3k0e9u2nxtwz-wpengine.netdna-ssl.com/wp-content/uploads/2019/01/Myles_Pedlar_13-770x1090.jpg"></div>
<div><img src="https://trendland.com/wp-content/uploads/2019/01/Myles_Pedlar_3.jpg"></div>
<div><img src="https://1aike31wshtt3k0e9u2nxtwz-wpengine.netdna-ssl.com/wp-content/uploads/2019/01/Myles_Pedlar_13-770x1090.jpg"></div>
</div>
</div>
CSS
img {
max-width:100%;
max-height:100%;
margin: auto;
}
.carouselWrapper {
margin: 0px;
height: 80vh;
width: 100
}
.carousel{
width: 100%;
height: 100%;
margin:0px auto;
}
.slick-slide{
margin: 10px;
}
.slick-slide img{
width: 100%;
}

Answer 1

Try to see this example. Hoping this is what you're looking for. All the best!
.carousel-inner .item{ height:500px; background-size:cover;background-position: center center;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-image: url(//placehold.it/1024x700) ">
</div>
<div class="item" style="background-image: url(//placehold.it/100x100) ">
</div>
<div class="item" style="background-image: url(//placehold.it/1024x700) ">
</div>
<div class="item" style="background-image: url(//placehold.it/200x200) ">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

Add this code in your css.
.slick-list, .slick-track {
height: 100%;
}
.slick-slide img{
width: fit-content;
}

Answer 3

See if this what you want, I'm just inherit the img in "carousel div" and set the div with 100%
.carousel{ max-height:100%; overflow:hidden;}
.carousel div { width:100%; height: 100%; }
.carousel div img {
max-width:100% ;
max-height:100%;
width:auto;
margin: auto;
}
.carouselWrapper {
margin: 0px;
height: 80vh;
width: 100
}
.carousel{
width: 100%;
height: 100%;
margin:0px auto;
}
this was the result