Polyfill object-fit and object-position on images on IE9, IE10, IE11, Edge, Safari, ...

This adds support for object-fit and object-position to IEdge 9-13, Android < 5, Safari < 10 and skips browsers that already support them.

Take a look at the demo.

• Fast and lightweight
• No additional elements are created or necessary
• Once set, position is taken care by the browser
• srcset support
• You can still access/change src and srcset properties and attributes: img.src = 'other-image.jpg'

              | bfred-it<br>/object-fit-images🌟                                                                                         | [constancecchen<br>/object-fit-polyfill](https://github.com/constancecchen/object-fit-polyfill) | [tonipinel<br>/object-fit-polyfill](https://github.com/tonipinel/object-fit-polyfill) | [jonathantneal<br>/fitie](https://github.com/jonathantneal/fitie)

:--- | :--- | :--- | :--- | :--- Browsers | _{IEdge 9-14, Android<5, Safari<10} | <- Same | "All browsers" | IE 8-11 Tags | img | image video picture | img | img video cover/contain | 💚 | 💚 | 💚 | 💚 fill | 💚 | 💚 | 💚 | 💚 none | 💚 | 💚 | 💚 | 💔 scale-down | 💚 _{using {watchMQ:true}} | 💚 | 💔 | 💔 object-position | 💚 | 💚 | 💔 | 💔 srcset support | 💚 Native or picturefill _notes | 💚 | 💔 | 💔 Extra elements | 💚 No | 💔 Yes | 💔 Yes | 💔 Yes Settings | 💚 via CSS | 💔 via HTML | 💔 via HTML | 💔 via HTML

You will need 3 things

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

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

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

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

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

npm install --save object-fit-images

var objectFitImages = require('object-fit-images');

If you don't use browserify/webpack, include this instead:

<script src="dist/ofi.min.js"></script>

or from the unpkg.com CDN:

<script src="https://unpkg.com/object-fit-images@VERSION/dist/ofi.min.js"></script>

Instead of @VERSION you should specify exact version like @1.1.1. The latest version is

        The images to fix. More info in the <a href="#usage">Usage</a> section 

    </td>
</tr>
<tr>
    <th><code>options</code></th>
    <td>
        
        Type: <code>object</code><br>
        Default: <code>{}</code><br>
        Example: <code>{watchMQ:true}</code><br><br>
        
        <table>
            <tr>
                <th><code>watchMQ</code></th>
                <td>
                    Type: <code>boolean</code><br>
                    Default: <code>false</code>

                    This enables the automatic re-fix of the selected images when the window resizes. You only need it <a href="#apply-on-resize">in some cases</a>
                </td>
            </tr>
        </table>
    </td>
</tr>

MIT © Federico Brigante