You can implement basic object-fit behavior with background images

Updated . Posted . Visible to the public. Deprecated.

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 .

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.

Profile picture of Henning Koch
Henning Koch
Last edit
Jakob Scholz
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2016-07-19 07:01)