I am looking to fill a parent div with an img, but I want the image to be a standalone img element inside the div, rather than setting it as a background property.
To clarify, instead of this:
div {
background-image: url('someimg.jpg');
background-size: cover;
background-repeat: no-repeat;
}
I want to achieve the same effect using an img element like this:
<div>
<!-- Image element should cover the container on desktops and small screens -->
<img src="someimg.jpg">
</div>
I was able to partially implement this using CSS for the img:
img {
width: 100%;
max-height: 100%;
object-fit: fill;
}
However, when resizing, the image does not completely fill the parent container. You can see the issue in this fiddle: https://jsfiddle.net/dy5ub0f5/5/