Fill parent div with image element - html

Question

I want to fill a parent div with a img, but instead of setting the image as a background property of the div, I want it to be a individual img element inside of the div.
In other words, I want to do this:
div {
background-image: url('someimg.jpg');
background-size: cover;
background-repeat: no-repeat;
}
..but with a img element, like this:
<div>
<!-- Image element should cover the container on dekstops and small screens as well -->
<img src="someimg.jpg">
</div>
I managed to do something like this on the img:
img {
width: 100%;
max-height: 100%;
object-fit: fill;
}
..but on resize, it doesn't fill the parent. Here's a fiddle: https://jsfiddle.net/dy5ub0f5/5/

Answer 1

The img may be filling the parent, but the parent may not be the size you expect.
Change the img styling from max-height: 100% to height: 100%
Adjust the size of the parent div.

Answer 2

Since, you give max-height:100%; in CSS, if your image resolution is less than the div (400Px) then it will stock on with its original height (375px). That's why the image is not filling the parent div on resizing.
div {
height: 400px;
width: 100%;
background-color:#ececec;
}
img {
width: 100%;
height: 100%;
object-fit:fill;
}
<div class="image">
<img src="https://png.pngtree.com/thumb_back/fw800/back_pic/00/06/31/695628f664c006c.jpg">
</div>
The Above Code Will Make the image to fill in its Parent DIV. But Since the picture resolution is less than the div, the image will blur.
To avoid you can use max-width and max-height, so that if the image have less resolution than the div, it will stick with its own size, otherwise it will fill the parent div like the following:
div {
height: 400px;
width: 100%;
background-color:#ececec;
}
img {
max-width: 100%;
max-height: 100%;
object-fit:fill;
}
<div class="image">
<img src="https://png.pngtree.com/thumb_back/fw800/back_pic/00/06/31/695628f664c006c.jpg">
</div>