Polyfill
object-fit
andobject-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
andsrcset
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
-
one or more
<img>
elements withsrc
orsrcset
<img class='your-favorite-image' src='image.jpg'>
-
CSS defining
object-fit
and a specialfont-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 callingobjectFitImages()
), make sure to include the quotes in the property. -
the activation call before
</body>
, or on DOM readyobjectFitImages(); // 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 theobject-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 thisimg { 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
parameter | description |
---|---|
images |
Type: string , element , array , NodeList , null Default: null
|
MIT Β© Federico Brigante