object-fit-images v3.2.4
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
, or your media queries change the value of
object-fit
, like this```css 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.
License
MIT Β© Federico Brigante
7 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago