CSS Object Fit for Image fill rather than using background image on a div

HTML

<h3>Original Image</h3>
    <img src="https://picsum.photos/300/300">

    <h3>Object Fit Contain</h3>
<p>you can drag the image size to see how contain functions depending on size of the wrapping element</p>
    <div class="obj-wrap">
        <img src="https://picsum.photos/300/300" class="obj-fit-1">
    </div>

    <h3>Object Fit Cover</h3>
<p>Now the image is set to cover so you can see how the image covers the whole div depending on its size, this will clip the image, but remain centered unless we change the <code>object-position</code></p>
    <div class="obj-wrap">
        <img src="https://picsum.photos/300/300" class="obj-fit-2">
    </div>

<h3>Object Position</h3>
<p>in the following example we use <code>object-position</code> to change where the object sits depending on how the wrap is resized. In this case it is set to bottom and center.</p>
    <div class="obj-wrap">
        <img src="https://picsum.photos/300/300" class="obj-fit-3">
    </div>

<h3>Object Position Using a Percentage</h3>
<p>you can also use object position with a percentage or a pixel value if you dont want the image to center by default, default value for <code>object-position</code> is 50% 50%</p>
    <div class="obj-wrap">
        <img src="https://picsum.photos/300/300" class="obj-fit-4">
    </div>

CSS

.obj-fit-1 {
            width:100%;
            height:100%;
            object-fit:contain;
        }
.obj-fit-2 {
  width:100%;
  height:100%;
  object-fit:cover;
}
.obj-fit-3 {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:bottom center;
}
.obj-fit-4 {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:10px 40%;
}
        .obj-wrap {
            resize:both;
            display:block;
            overflow:auto;
            height:200px;
            width:100px;
        }

Original Image

Object Fit Contain

you can drag the image size to see how contain functions depending on size of the wrapping element

Object Fit Cover

Now the image is set to cover so you can see how the image covers the whole div depending on its size, this will clip the image, but remain centered unless we change the object-position

Object Position

in the following example we use object-position to change where the object sits depending on how the wrap is resized. In this case it is set to bottom and center.

Object Position Using a Percentage

you can also use object position with a percentage or a pixel value if you dont want the image to center by default, default value for object-position is 50% 50%