OUTDATED! CSS3 object-fit polyfill with jQuery
JavaScript HTML
Latest commit 1fdb5c2 Feb 20, 2017 @schmidsi committed on GitHub Update README.md

README.md

Warning: This project is outdated and unmaintained

Unfortunately, I do not find time to maintain this project further because it is also not in use in any of my projects anymore. If someone wants to jump in, feel free to drop me a message and I can give access.

Here is a promising alternative: https://github.com/bfred-it/object-fit-images/ (although, I have not tested it by myself)

jquery object-fit polyfill

Simple object-fit polyfill for the CSS3 Images object-fit property. It contains a quick feature detection for Opera which supports this property natively.

Read the blog post about this polyfill on Steve Workman's blog

Read about how CSS3 images works on the Opera Developer blog

Usage:

$('.selector').objectFit('contain');
$('.selector').objectFit({type: 'cover', hideOverflow: true}); // hiding overflow is only relevant to cover

Image sizes are now re-calculated for the given selectors on browser re-size without you having to do anything.

Similarities to box-sizing: cover/contain:

The syntax for box-sizing and object-fit are identical, and their purpose is the same. One important thing to remember is that:

  • object-fit requires a width or height to re-size the media

This is because object-fit is meant to size the image inside an element (and other graphical elements like video). For example, the default UA stylesheet for is "background: black; object-fit: contain; object-position: center;", which achieves the "letterboxing" effect where you get black bars around videos that have a different aspect ratio than the element).

This can be accomplished using min/max-width/height, instead of setting absolute dimensions

Authors:

Originally by Schmidsi and re-worked by steveworkman

To do:

  • Add an object-position polyfill
  • Add support for all other media types: <video>, <svg> <canvas> and <embed>