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 book lover

Growing Rails Applications in Practice

Check out our e-book. Learn to structure large Ruby on Rails codebases with the tools you already know and love.

  • Introduce design conventions for controllers and user-facing models
  • Create a system for growth
  • Build applications to last
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)