michaelbarys
6/23/2016 - 11:26 AM

Emulate background-size: cover for <img /> with pure CSS

Emulate background-size: cover for with pure CSS

img-cover.css
content_copyfile_download
figure {
  position: relative; 
}

.img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.img-wrapper img {
  position: absolute;
  left: 0;
  right: 0;
  top: -9999px;
  bottom: -9999px;
  margin: auto 0;
  width: 100%;
  transition: all .4s ease-in-out; 
  -webkit-backface-visibility: hidden; 
}