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.

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)