Read more

You can implement basic object-fit behavior with background images

Henning Koch
July 19, 2016Software engineer at makandra GmbH

We no longer support Internet Explorer.

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

Illustration online protection

Rails professionals since 2007

Our laser focus on a single technology has made us a leader in this space. Need help?

  • We build a solid first version of your product
  • We train your development team
  • We rescue your project in trouble
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.

Posted by Henning Koch to makandra dev (2016-07-19 09:01)