How do I wrap images of different resolutions in a responsive container? - html

Question

I have galleries on multiple pages where the dimensions of the photos are different sizes. I have them in bootstrap carousels and I don't want them to make the dimensions of the carousel itself different, but I still want to show the whole image.
HTML:
<div id="carouselExampleControls" class="carousel slide pt-5 ps-4" data-bs-ride="carousel">
<div class="carousel-inner galleryCarousel">
<div class="carousel-item active">
<a href="http://www.bmillerequipmentsales.com/" target="_blank">
<div class="companyGallery">
<img src="../images/galleries/billmiller/Bill_Gallery_1.jpeg" class="d-block w-100" alt="...">
</div>
</a>
</div>
<div class="carousel-item">
<a href="http://www.bmillerequipmentsales.com/" target="_blank">
<div class="companyGallery">
<img src="../images/galleries/billmiller/Bill_Gallery_2.jpeg" class="d-block w-100" alt="...">
</div>
</a>
</div>
<div class="carousel-item">
<a href="http://www.bmillerequipmentsales.com/" target="_blank">
<div class="companyGallery">
<img src="../images/galleries/billmiller/Bill_Gallery_3.jpeg" class="d-block w-100" alt="...">
</div>
</a>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
CSS:
.companyGallery img {
max-width:100%;
height: auto;
}
.companyGallery {
width: 100%;
height: 100%;
display: grid;
place-content: center;
}
.galleryCarousel {
background-color: #E3E1E1;
max-width: 1280px;
height:720px;
}
I have tried something like this