css - How do I change the resizing behavior of an image that is set to cover?

Question

I'm trying to get an element to resize to the top when the viewport gets smaller

    div {
  width: 400px;
  height: 300px;
  resize: both;
  overflow: auto;
}

/* the ideal scenario would be that the bottom of the image stays aligned to the bottom, then when resized, everything would get pushed to the top instead */

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* thanks in advance ?? */

https://jsfiddle.net/37xf9Lab

question from:https://stackoverflow.com/questions/65885608/how-do-i-change-the-resizing-behavior-of-an-image-that-is-set-to-cover

Answer 1

Waitting for answers