Q:

How to fill a div with an image while div keeps its ratio of 1:1.5 on a responsive page

I have divs that have a ratio of 1:1.5 and I am putting images inside of said divs...I want to try and maybe use an image that is 500px x 750px as the layout background so that no matter what image is put inside this div all of the divs will be responsive and the same size but the images in them will stretch to fill or even overflow:hidden outside of the div. Ill try to explain using pictures.
I have divs that are responsive, I want them to keep their 1:1.5 ratio when resizing page. And all the divs to be the same height and width for the responsiveness.

The image inside does not have to resize to just fill this div...It can be cutoff on height or width but I always want these divs to have the same height and width ratio as they resize, Instead of them doing this. Because the images will not be the same ratio.

It does not matter if the image gets cutoff But I want the container div to take up the same space as the other divs. for example:

Is it possible to use an image that is say 250px by 375px as a hidden background to create the div dimensions for the responsiveness so that all the divs keep the same height and width and then display the required image from the database inside that div? I've tried the following but did not achieve what I am trying to do. Maybe it requires jquery to resize the image to fill the div. Other websites that I have seen this on are not responsive and just wondering if it is at all possible.
<div class="fill">
     <img src="img/blah.jpg">
</div> 

div.fill {
    position:relative;
    border:1px dashed red;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden
}
div.fill img {
    flex-shrink:0;
    min-width:100%;
    min-height:100%
}

but it just produces this

Instead of this

Got it to work with @fouarges answer
<div class="fill"><img style="background-image: url('.$row['ad_photo_thumb'].');background-size: cover;background-position: center center;background-repeat: no-repeat;" src="img/blah.png"  class="img-responsive imageSizingGallery imageProfileStyleSmallVIP" style="border:20px solid #6808a0;object-fit:contain;" width="100%" alt=""/></div>

And CSS
div.fill {
   background-image: url('../img/blah.png');
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
}

A:

I personally did the below once: insert a transparent "blah" PNG image (that has a 1:1.5 ratio) inside the div, and use the actual image as a background for the div.
Apply regular responsive properties to the "blah" image to achieve the desired results and use the below for the parent div:
.fill {
    background-image: url('blah.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

