Unable to resize carousel images according to carousel dimensions

I am trying to create a responsive carousel with a few images in it. There are two kind of images:
1. Smaller images
2. Large images.

I want the smaller, no matter how small, images to stretch and fill and large images to resize or if that's not possible, be cropped and right sizes images to fill as it is. Also, as you can see I have set max-height:500px which is not good practice for responsive, but if I don't do that, large images appear larger than what I want them to be.

So basically, I am looking for some way to resize and fit image in my carousal irrespective of the dimensions of image. Right now, I am able to crop the larger images but I am unable to stretch and fill smaller images. The answers are not working for me.

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox"
        style="width:100% !important; height:100% !important; max-height:500px !important;">

        <div class="carousel-item active"
            style="background-size: cover !important; background-position: 50% 50% !important; min-width: 100% !important; min-height: 100% !important;">
            <img class="d-block w-100 h-100"
                src="{{ v.url }}">
        </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>

I have tried almost every answer on that question, e.g. background-size: cover etc and none of it worked for me. So PLEASE test once before marking it duplicate or before referring to some other answer. I don't think if it's needed, but this carousel is in a column in a grid.
If you could do it without using js that would be great because I am not a front-end developer, I just want to fix it without wasting much time.