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).

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

• We build reliable cloud solutions with Infrastructure as code
• We are experts in security, Linux and databases
• We support your dev team to perform

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