Posted almost 3 years ago. Visible to the public. Linked content.

object-fit polyfill by lazysizes

All new browsers 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).

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


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

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Dominik Schöler
Last edit:
almost 3 years ago
by Dominik Schöler
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more