All new browsers Show archive.org snapshot support the new object-fit CSS property. It allows to specify how an element behaves within its parent element and is intended for images and videos. The most useful values are contain (fit-in) and cover (crop).

UI/UX Design by

We make sure that your target audience has the best possible experience with your digital product. You get:

• Design tailored to your audience
• Proven processes customized to your needs
• An expert team of experienced designers

Read more Show archive.org snapshot

Unfortunately, IE does not support this yet. However, if you're already using lazysizes Show archive.org snapshot , you can use its object-fit polyfill!

Usage

In your Javascript manifest, require them like this:

#= require plugins/object-fit/ls.object-fit
#= require lazysizes

Now use the mixin below to fit an image into a container. Example:

# HAML
.image
  = image_tag post.image

# SASS
.image
  +object-fit(cover, $aspect-ratio: 52%)

Sass Mixin

= object-fit($mode, $aspect-ratio)
  position: relative // Anchor for img

  &::before // Generate height space for the img
    content: ''

    display: block
    width: 100%
    height: 0
    padding-bottom: $aspect-ratio // Aspect ratio

  img
    display: block
    position: absolute
    top: 0
    left: 0
    height: 100%
    width: 100%

    object-fit: $mode
    font-family: "object-fit: #{$mode}" // Configure lazysizes' polyfill