object-fit-images

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	fregante /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

one or more <img> elements with src or srcset

<img class='your-favorite-image' src='image.jpg'>

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.

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:

You're using scale-down, or

your media queries change the value of object-fit, like this

img { object-fit: cover; } @media (max-width: 500px) { img { object-fit: contain; } }

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