megclaypool
8/31/2018 - 2:12 AM

Cropping an image proportionally with css

[Cropping an image proportionally with css.]

Damnit -- the object-fit property doesn't work in IE (not even 11!!!) so the image ends up distorted :(

stylesheet.scss
content_copyfile_download
.imagewrapper {
    overflow: hidden;
    // padding-top is the ratio of your design image's height/width
    padding-top: 64.5%; 
    position: relative;
    width: 100% // or however wide you want your cropped image to be
    img {
      bottom: 0;
      height: 100%;
      left: 0;
      object-fit: cover;
      position: absolute;
      right: 0;
      top: 0;
      width: 100%;
    }
  }