How to make an image fit the carousel? [duplicate] - css

Question

This question already has answers here:
How to create a responsive image that also scales up in Bootstrap 3
(8 answers)
Closed 4 years ago.
I have a carousel with fixed size (for example, width=800px, height=450px). But I my images have different aspect ratio (16 : 9, 16:10, 1:1, etc) and the size, bigger than the size of my carousel. I am trying to make all the images reduce their size to fit my carousel.
Code of the carousel is:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="carousel-img" src="{{ last_post.image.url }}"
alt="First slide">
</div>
<div class="carousel-item">
<img class="carousel-img"
src="{{ second_last_post.image.url }}" alt="Second slide">
</div>
<div class="carousel-item">
<img class="carousel-img" src="{{ third_last_post.image.url }}"
alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS:
.carousel-inner {
height: 450px;
width: 800px;
}
How can I resize images to fit the carousel?

Answer 1

The following works for me. It will cover the entire div with your photo but this means that the photo will be zoomed-in as much as it needs to be to do that. So it must hide some (maybe critical) parts from the photo.
.carousel-img
{
width: 100%;
height: 100%;
object-fit: cover;
}
Otherwise if you can use object-fit: contain; instead, to always display the entire photo into your measures.