object-fit-images
v3.2.4
Published
Polyfill object-fit and object-position on images on IE9, IE10, IE11, Edge, Safari, ...
Downloads
419,015
Maintainers
Readme
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
supportsrc
andsrcset
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
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.
Apply on resize
You don't need to re-apply it on resize
, unless:
You're using
scale-down
, oryour 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
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.
License
MIT © Federico Brigante