object-fit polyfill by lazysizes

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

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

css-tricks.com

Dominik Schöler

makandra.de

Say thanks

Last edit

2016-07-07

Dominik Schöler

License

Source code in this card is licensed under the MIT License.

Posted by Dominik Schöler to makandra dev (2016-07-07 12:18)