Skip to content
πŸ—» Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ...
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit f951d2a Jul 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Rename user Jul 24, 2019
dist Meta Jul 24, 2019
preprocessors Added postcss reference in preprocessors May 18, 2016
.editorconfig Initial version Mar 11, 2016
.gitattributes Initial version Mar 11, 2016
.gitignore Removed built node files from git; added ESM to npm Apr 26, 2016
.travis.yml gh-pages -> master Oct 30, 2016
404.html Rename user Jul 24, 2019
CHANGELOG.md Add built files Feb 2, 2017
README.md Meta Jul 24, 2019
detailed-support-tables.md Rename user Jul 24, 2019
extended-comparison.md Rename user Jul 24, 2019
index.js Rename user Jul 24, 2019
license Rename user Jul 24, 2019
package.json Meta Jul 24, 2019
yarn.lock Update yarn.lock Apr 19, 2017

README.md

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

  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 can’t perform that action at this time.