🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Polyfill object-fit and object-position on images on IE9, IE10, IE11, Edge, Safari, etc.Features:Fast and lightweightNo additional elements are created or necessaryOnce set, position is taken care by the browsersrcset supportYou can still access/change src and srcset properties and attributes: img.src = 'other-image.jpg'

Core Java Script Image Effects

Documentation

object-fit-images gzipped size build status npm CDNJS jsDelivr

🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ...

  • Fast and lightweight (demo)
  • No additional elements are created
  • Setup is done via CSS
  • Scaling is taken care by the browser (it uses background-size)
  • srcset support
  • src and srcset properties and attributes keep working: img.src = 'other-image.jpg'

Alternative solutions

Comparison bfred-it
/object-fit-images🌟
constancecchen
/object-fit-polyfill
tonipinel
/object-fit-polyfill
Browsers IEdge 9-14, Android<5, Safari<10 <- Same "All browsers"
Tags img image video picture img
cover/contain 💚 💚 💚
fill 💚 💚 💚
none 💚 💚 💚
scale-down 💚 using {watchMQ:true} 💚 💔
object-position 💚 💚 💔
srcset support 💚 Native or picturefill notes 💚 💔
Extra elements 💚 No 💔 Yes 💔 Yes
Settings 💚 via CSS 💔 via HTML 💔 via HTML

Usage

You will need 3 things

  1. one or more <img> elements with src or srcset

    <img class='your-favorite-image' src='image.jpg'>
  2. CSS defining object-fit and a special font-family property to allow IE to read the correct value

    .your-favorite-image { 	object-fit: contain; 	font-family: 'object-fit: contain;'; }

    or, if you also need object-position

    .your-favorite-image { 	object-fit: cover; 	object-position: bottom; 	font-family: 'object-fit: cover; object-position: bottom;'; }

    To generate the font-family automatically, you can use the PostCSS plugin or the SCSS/SASS/Less mixins.

    If you set the font-family via JavaScript (which must be followed by calling objectFitImages()), make sure to include the quotes in the property.

  3. the activation call before </body>, or on DOM ready

    objectFitImages(); // if you use jQuery, the code is: $(function () { objectFitImages() });

    This will fix all the images on the page and also all the images added later (auto mode).

    Alternatively, only fix the images you want, once:

    // pass a selector objectFitImages('img.some-image');
    // an array/NodeList var someImages = document.querySelectorAll('img.some-image'); objectFitImages(someImages);
    // a single element var oneImage = document.querySelector('img.some-image'); objectFitImages(oneImage);
    // or with jQuery var $someImages = $('img.some-image'); objectFitImages($someImages);

    You can call objectFitImages() on the same elements more than once without issues, for example to manually request an update of the object-fit value.

Apply on resize

You don't need to re-apply it on resize, unless:

In one of those cases, use the watchMQ option:

objectFitImages('img.some-image', {watchMQ: true}); // or objectFitImages(null, {watchMQ: true}); // for the auto mode

Install

Pick your favorite:

<script src="dist/ofi.min.js"></script> <!-- CDN is also available, but I suggest you concatenate JS files instead --> <!-- Visit https://cdnjs.com/libraries/object-fit-images -->
npm install --save object-fit-images
var objectFitImages = require('object-fit-images');
import objectFitImages from 'object-fit-images';

API

objectFitImages(images, options)

Both parameters are optional.

parameter description
images Type: string, element, array, NodeList, null
Default: null

The images to fix. More info in the Usage section
options Type: object
Default: {}
Example: {watchMQ:true}

watchMQ Type: boolean
Default: false

This enables the automatic re-fix of the selected images when the window resizes. You only need it in some cases

License

MIT © Federico Brigante


You May Also Like