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.
Posted by Henning Koch to makandra dev (2016-07-19 07:01)