Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fregante/object-fit-images
🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ...
https://github.com/fregante/object-fit-images
css edge ie images js polyfill
Last synced: 3 months ago
JSON representation
🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ...
- Host: GitHub
- URL: https://github.com/fregante/object-fit-images
- Owner: fregante
- License: mit
- Archived: true
- Created: 2016-03-11T12:06:58.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-07-24T10:13:21.000Z (over 5 years ago)
- Last Synced: 2024-05-01T21:17:28.722Z (8 months ago)
- Topics: css, edge, ie, images, js, polyfill
- Language: JavaScript
- Homepage: https://npm.im/object-fit-images
- Size: 219 KB
- Stars: 2,035
- Watchers: 35
- Forks: 272
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: license
Awesome Lists containing this project
README
# object-fit-images [![gzipped size][badge-gzip]](#no-link) [![build status][badge-travis]][link-travis] [![npm][badge-version]][link-npm] [![CDNJS][badge-cdnjs]][link-cdnjs] [![jsDelivr][badge-jsdelivr]][link-jsdelivr]
[badge-gzip]: https://badges.herokuapp.com/size/github/fregante/object-fit-images/master/dist/ofi.min.js?gzip=true&label=gzipped%20size
[badge-travis]: https://api.travis-ci.org/fregante/object-fit-images.svg
[badge-version]: https://img.shields.io/npm/v/object-fit-images.svg
[badge-cdnjs]: https://img.shields.io/cdnjs/v/object-fit-images.svg
[badge-jsdelivr]: https://data.jsdelivr.com/v1/package/npm/object-fit-images/badge?style=rounded
[link-travis]: https://travis-ci.org/fregante/object-fit-images
[link-npm]: https://www.npmjs.com/package/object-fit-images
[link-cdnjs]: https://cdnjs.com/libraries/object-fit-images
[link-jsdelivr]: https://www.jsdelivr.com/package/npm/object-fit-images
> 🗻 Polyfill object-fit/object-position on `![]()
`: IE9, IE10, IE11, Edge, Safari, ...
- Fast and lightweight ([demo](http://fregante.github.io/object-fit-images/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](https://github.com/constancecchen/object-fit-polyfill) | [tonipinel
/object-fit-polyfill](https://github.com/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}`](#apply-on-resize) | 💚 | 💔
`object-position` | 💚 | 💚 | 💔
`srcset` support | 💚 Native or [picturefill](https://github.com/scottjehl/picturefill) [notes](detailed-support-tables.md) | 💚 | 💔
Extra elements | 💚 No | 💔 Yes | 💔 Yes
Settings | 💚 via CSS | 💔 via HTML | 💔 via HTML
## Usage
You will need 3 things
1. one or more `![]()
` elements with `src` or `srcset`
```html
```
2. CSS defining `object-fit` and a special `font-family` property to allow IE to read the correct value
```css
.your-favorite-image {
object-fit: contain;
font-family: 'object-fit: contain;';
}
```
or, if you also need `object-position`
```css
.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](https://github.com/ronik-design/postcss-object-fit-images) or the [SCSS/SASS/Less mixins.](/preprocessors)
If you set the `font-family` via JavaScript (which must be followed by calling `objectFitImages()`), make sure to include the quotes [**in** the property.](https://github.com/fregante/object-fit-images/issues/29#issuecomment-227491892)