So you want to use object-fit Show archive.org snapshot , but you also need to support Internet Explorer Show archive.org snapshot .

UI/UX Design by

We make sure that your target audience has the best possible experience with your digital product. You get:

• Design tailored to your audience
• Proven processes customized to your needs
• An expert team of experienced designers

Read more Show archive.org snapshot

One option is to use lazysizes as a kinda-polyfill. Another option is to implement the requirement with background-size: contain, and background-size: cover, which is supported in IE9+ Show archive.org snapshot .

E.g. to make an image cover a 100x100 px² area, cropping the image when necessary:

<div class="picture" style="background-image: url('picture.png')"></div>

.picture {
  width: 100px;
  height: 100px;
  background-size: cover;
}

This has roughly the same effect as as applying object-fit: fill to an <img> within a 100x100 px² container.