how to fit a background image in a div

im working on a banner with bootstrap 5, the images that i'm using for the banner are loaded from a form that a user fill.

    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner border rounded">
            <%@client.each_with_index do |empleado_post, i|%>
                <%if i == 0 %>
                    <div class="carousel-item item" style="background-image: url(<%= rails_blob_url(empleado_post.avatar) %>); background-size: cover; background-repeat: no-repeat;">      
                    </div>
                    <%next%>
                <%end%>
                    <div class="carousel-item item" style="background-image: url(<%= rails_blob_url(empleado_post.avatar) %>);background-size: cover; background-repeat: no-repeat;">       
                    </div>
            <%end%>
        </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>
        </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>
        </button>   
    </div>

CSS:

.carousel-inner {
  height: 0;
  padding-bottom: 15%; 
}

.carousel-item {
  position: absolute !important; 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.carousel-item img {
  height: 100%; 
  object-fit: contain; 
}

.carousel-control-prev,
.carousel-control-next{

  background-color: blue;
  height: 100%;
}

This is the result

i want all the background images fit perfectly in the div