How to cover a div with an image independently of its height?

Question

(!) This question could be considered duplicated, however, did not find anything that could fit as a solution in up to 10 topics - I am sorry for that, I am trying to find a solution to this particular situation;

Let me explain the problem,

I'll leave here an image that may help you understand the issue :

I have a full width div, which height will change on page heights alteration.
This div contains full width images covering it, so you can see in the following screenshot :

So I tried to make it full width as well full height, independently of the parent's height
( which is higly vulnerable to changes once its height depends on the distance between the top and bottom of the screen - So anytime we change screen's height, the referred div will as well change the div's height);

The problem spawns here :
When the screen receives a ration between width and height of 1:2 (width:height), then, images will re-size once the page's width (which is img's max width) will not be enough to fill the height, not filling the div as I wished, as you can verify at following screenshot:

(the red part is the parent div of the image)

• I will be searching for a solution in javascript/jquery/css
• The use of the image as background is being discouraged and it did not work as I tried before
• Any tip or indication will be highly appreciated and praised;
• If you find this topic offensive or a rule-breaker, please notify so I can delete this question once I do not want to spam this wonderful community.

Thanks in advance ! (accept my apologies for this long question)

With the best wishes,
Vladimir

Answer 1

the property that you're looking for is:

background-size: cover; (for background-image);
object-fit: cover; (for regular images);

ps: the container of the object-fit picture must have overflow: hidden