{"id":13438047,"url":"https://github.com/fregante/object-fit-images","last_synced_at":"2025-09-28T19:31:50.502Z","repository":{"id":41158168,"uuid":"53664487","full_name":"fregante/object-fit-images","owner":"fregante","description":"🗻 Polyfill object-fit/object-position on \u003cimg\u003e: IE9, IE10, IE11, Edge, Safari, ...","archived":true,"fork":false,"pushed_at":"2024-10-10T12:16:03.000Z","size":231,"stargazers_count":2029,"open_issues_count":3,"forks_count":269,"subscribers_count":35,"default_branch":"master","last_synced_at":"2024-10-30T01:03:19.322Z","etag":null,"topics":["css","edge","ie","images","js","polyfill"],"latest_commit_sha":null,"homepage":"https://npm.im/object-fit-images","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fregante.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-11T12:06:58.000Z","updated_at":"2024-10-15T06:13:21.000Z","dependencies_parsed_at":"2024-11-23T04:15:09.728Z","dependency_job_id":null,"html_url":"https://github.com/fregante/object-fit-images","commit_stats":{"total_commits":190,"total_committers":17,"mean_commits":"11.176470588235293","dds":"0.10526315789473684","last_synced_commit":"f951d2a60cde7db63f64cde109de286a4b82541d"},"previous_names":["bfred-it/object-fit-images"],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fobject-fit-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fobject-fit-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fobject-fit-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fobject-fit-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fregante","download_url":"https://codeload.github.com/fregante/object-fit-images/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234555865,"owners_count":18851860,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","edge","ie","images","js","polyfill"],"created_at":"2024-07-31T03:01:02.507Z","updated_at":"2025-09-28T19:31:45.176Z","avatar_url":"https://github.com/fregante.png","language":"JavaScript","funding_links":[],"categories":["Plugins","JavaScript"],"sub_categories":["Polyfills"],"readme":"# object-fit-images [![gzipped size][badge-gzip]](#no-link) [![npm][badge-version]][link-npm] [![CDNJS][badge-cdnjs]][link-cdnjs] [![jsDelivr][badge-jsdelivr]][link-jsdelivr]\n\n  [badge-gzip]: https://badges.herokuapp.com/size/github/fregante/object-fit-images/master/dist/ofi.min.js?gzip=true\u0026label=gzipped%20size\n  [badge-version]: https://img.shields.io/npm/v/object-fit-images.svg\n  [badge-cdnjs]: https://img.shields.io/cdnjs/v/object-fit-images.svg\n  [badge-jsdelivr]: https://data.jsdelivr.com/v1/package/npm/object-fit-images/badge?style=rounded\n  [link-npm]: https://www.npmjs.com/package/object-fit-images\n  [link-cdnjs]: https://cdnjs.com/libraries/object-fit-images\n  [link-jsdelivr]: https://www.jsdelivr.com/package/npm/object-fit-images\n\n\u003e 🗻 Polyfill object-fit/object-position on `\u003cimg\u003e`: IE9, IE10, IE11, Edge, Safari, ...\n\n- Fast and lightweight ([demo](http://fregante.github.io/object-fit-images/demo/))\n- No additional elements are created\n- Setup is done via CSS\n- Scaling is taken care by the browser (it uses `background-size`)\n- `srcset` support\n- `src` and `srcset` properties and attributes keep working: `img.src = 'other-image.jpg'`\n\n## Alternative solutions\n\n\nComparison           | fregante\u003cbr\u003e/object-fit-images🌟                                                                                         | [constancecchen\u003cbr\u003e/object-fit-polyfill](https://github.com/constancecchen/object-fit-polyfill) | [tonipinel\u003cbr\u003e/object-fit-polyfill](https://github.com/tonipinel/object-fit-polyfill)\n---              | ---                                                                                                      | ---                                                                                            | ---\nBrowsers          | \u003csub\u003eIEdge 9-14, Android\u003c5, Safari\u003c10\u003c/sub\u003e                                                                          | \u003c- Same                                                                                         | \"All browsers\"\nTags              | `img`                                                                                                     | `image` `video` `picture`                                                                     | `img`\n`cover/contain`   | 💚                                                                                                         | 💚                                                                                               | 💚\n`fill`            | 💚                                                                                                         | 💚                                                                                               | 💚\n`none`            | 💚                                                                                                         | 💚                                                                                               | 💚\n`scale-down`      | 💚 \u003csub\u003eusing [`{watchMQ:true}`](#apply-on-resize)\u003c/sub\u003e                                                             | 💚                                                                                               | 💔\n`object-position` | 💚                                                                                                         | 💚                                                                                               | 💔\n`srcset` support  | 💚 Native or [picturefill](https://github.com/scottjehl/picturefill) \u003csub\u003e[notes](detailed-support-tables.md)\u003c/sub\u003e | 💚                                                                                               | 💔\nExtra elements    | 💚 No                                                                                                      | 💔 Yes                                                                                           | 💔 Yes\nSettings    | 💚 via CSS                                                                                                      | 💔 via HTML                                                                                           | 💔 via HTML\n\n\n## Usage\n\nYou will need 3 things\n\n1. one or more `\u003cimg\u003e` elements with `src` or `srcset`\n\n\t```html\n\t\u003cimg class='your-favorite-image' src='image.jpg'\u003e\n\t```\n\n2. CSS defining `object-fit` and a special `font-family` property to allow IE to read the correct value\n\n\t```css\n\t.your-favorite-image {\n\t\tobject-fit: contain;\n\t\tfont-family: 'object-fit: contain;';\n\t}\n\t```\n\n\tor, if you also need `object-position`\n\n\t```css\n\t.your-favorite-image {\n\t\tobject-fit: cover;\n\t\tobject-position: bottom;\n\t\tfont-family: 'object-fit: cover; object-position: bottom;';\n\t}\n\t```\n\n\tTo 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)\n\n\tIf 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)\n\n3. \u003ca name=\"activation\"\u003e\u003c/a\u003e the activation call before `\u003c/body\u003e`, or _on DOM ready_\n\n\t```js\n\tobjectFitImages();\n\t// if you use jQuery, the code is: $(function () { objectFitImages() });\n\t```\n\n\tThis will fix all the images on the page **and** also all the images added later (auto mode).\n\n\tAlternatively, only fix the images you want, once:\n\n\t```js\n\t// pass a selector\n\tobjectFitImages('img.some-image');\n\t```\n\n\t```js\n\t// an array/NodeList\n\tvar someImages = document.querySelectorAll('img.some-image');\n\tobjectFitImages(someImages);\n\t```\n\n\t```js\n\t// a single element\n\tvar oneImage = document.querySelector('img.some-image');\n\tobjectFitImages(oneImage);\n\t```\n\n\t```js\n\t// or with jQuery\n\tvar $someImages = $('img.some-image');\n\tobjectFitImages($someImages);\n\t```\n\n\tYou can call `objectFitImages()` on the same elements more than once without issues, for example to manually request an update of the `object-fit` value.\n\n## Apply on `resize`\n\nYou don't need to re-apply it on `resize`, unless:\n\n* You're using `scale-down`, or\n* \u003ca id=\"media-query-affects-object-fit-value\"\u003eyour media queries change the value of `object-fit`,\u003c/a\u003e like this\n\n\t```css\n\t                            img { object-fit: cover; }\n\t@media (max-width: 500px) { img { object-fit: contain; } }\n\t```\n\nIn one of those cases, use the `watchMQ` option:\n\n```js\nobjectFitImages('img.some-image', {watchMQ: true});\n// or objectFitImages(null, {watchMQ: true}); // for the auto mode\n```\n\n## Install\n\nPick your favorite:\n\n```html\n\u003cscript src=\"dist/ofi.min.js\"\u003e\u003c/script\u003e\n\u003c!-- CDN is also available, but I suggest you concatenate JS files instead --\u003e\n\u003c!-- Visit https://cdnjs.com/libraries/object-fit-images --\u003e\n```\n\n```sh\nnpm install --save object-fit-images\n```\n\n```js\nvar objectFitImages = require('object-fit-images');\n```\n\n```js\nimport objectFitImages from 'object-fit-images';\n```\n\n## API\n\n### `objectFitImages(images, options)`\n\nBoth parameters are optional.\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eparameter\u003c/th\u003e\n        \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003eimages\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003e\n            Type: \u003ccode\u003estring\u003c/code\u003e, \u003ccode\u003eelement\u003c/code\u003e, \u003ccode\u003earray\u003c/code\u003e, \u003ccode\u003eNodeList\u003c/code\u003e, \u003ccode\u003enull\u003c/code\u003e\u003cbr\u003e\n            Default: \u003ccode\u003enull\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n            The images to fix. More info in the \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e section\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003e\u003ccode\u003eoptions\u003c/code\u003e\u003c/th\u003e\n        \u003ctd\u003e\n            Type: \u003ccode\u003eobject\u003c/code\u003e\u003cbr\u003e\n            Default: \u003ccode\u003e{}\u003c/code\u003e\u003cbr\u003e\n            Example: \u003ccode\u003e{watchMQ:true}\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n            \u003ctable\u003e\n                \u003ctr\u003e\n                    \u003cth\u003e\u003ccode\u003ewatchMQ\u003c/code\u003e\u003c/th\u003e\n                    \u003ctd\u003e\n                        Type: \u003ccode\u003eboolean\u003c/code\u003e\u003cbr\u003e\n                        Default: \u003ccode\u003efalse\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n                        This enables the automatic re-fix of the selected images when the window resizes. You only need it \u003ca href=\"#apply-on-resize\"\u003ein some cases\u003c/a\u003e\n                    \u003c/td\u003e\n                \u003c/tr\u003e\n            \u003c/table\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffregante%2Fobject-fit-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffregante%2Fobject-fit-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffregante%2Fobject-fit-images/lists"}