@polyfiller/object-fit

> A robust polyfill for the 'object-fit' and 'object-position' CSS-properties

Description

This is a robust, feature complete polyfill for the object-fit and object-position CSS properties.
It differs from other similar solutions primarily in three areas: feature completeness, modern API support, and the ability to react to changes.

Demo

To check out the polyfill in action, A demo can be found here.

$3

- Supports not only images, but also videos, the picture element, as well as the srcset attribute.
- Supports Shadow DOM.
- Reacts to changes, and updates calculated positions automatically.
- Leverages the browser's own scaling algorithms where possible.
- Works seamlessly and automatically.
- Works with the postcss-object-fit-images plugin.

Table of Contents

- Description
- Demo
- Features
- Table of Contents
- Install
- npm
- Yarn
- pnpm
- Applying the polyfill
- Usage
- Dependencies & Browser support
- Maintainers
- Backers
- Patreon
- FAQ
- What is the performance and reaction times of this polyfill?
- License

Install

$3

``
$ npm install @polyfiller/object-fit
`

$3

`
$ yarn add @polyfiller/object-fit
`

$3

`
$ pnpm add @polyfiller/object-fit
`

Applying the polyfill

The polyfill will check if the browser already supports object-fit and object-position and will _only_ be applied if the runtime doesn't already support it.

To include it, add this somewhere:

`typescript
import "@polyfiller/object-fit/polyfill";
`

However, it is generally a good idea that you only include the polyfill for runtimes that don't already support object-fit and object-position.
One way to do so is with an async import:

`typescript
if (!("objectFit" in document.documentElement.style)) {
await import("@polyfiller/object-fit/polyfill");
}
`

Alternatively, you can use Polyfill.app which uses this polyfill and takes care of only loading the polyfill if needed as well as adding the language features that the polyfill depends on (See dependencies).

Usage

You can provide object-fit and/or object-position values in one of more ways:

1. As part of the style attribute for an image:

`html

`

2. As part of a special object-fit, object-position, data-object-fit, or data-object-position attribute:

`html







`

3. Directly from CSS, using the object-fit and/or object-position properties, and a special font-family property that is used by browsers that doesn't natively support these features:

`css
img,
video {
object-fit: cover;
object-position: bottom;
font-family: "object-fit: cover; object-position: bottom";
}
`

To generate the font-family automatically based on your CSS, you can use this PostCSS plugin.

Dependencies & Browser support

This polyfill is distributed in ES5-compatible syntax, but is using some additional APIs and language features beyond ES5 which must be available in the runtime:

- MutationObserver
- requestAnimationFrame
- Set
- WeakMap
- Symbol.iterator
- Symbol.toStringTag

Generally, I would highly recommend using something like Polyfill.app which takes care of this stuff automatically.

Maintainers

| |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Frederik Wessberg
Twitter: @FredWessberg
Github: @wessberg
_Lead Developer_ |

Backers

| | |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Bubbles
Twitter: @use_bubbles | Christopher Blanchard |

$3

FAQ

$3

This polyfill observes various attributes on and

License

MIT © Frederik Wessberg (@FredWessberg) (Website)