@verndale/object-fit NPM

@verndale/object-fit

npm bundle size npm

Pollyfill for object-fit and object-position.

Attribute	Supported options	Default
`data-object-fit`	`cover` \| `contain`	`cover`
`data-object-position`	`top` \| `center` \| `bottom` `percentage` \| `length` (px, em, rem, etc) \| `left` \| `center` \| `right` `inherit`	`center`

npm i @verndale/object-fit

And then simply import the pollyfill.

import '@verndale/object-fit';

Set data-object-fit and data-object-position.

<img
  src="example.jpg"
  data-object-fit="cover"
  data-object-position="center"
/>

Customize your properties for browsers that do support these properties.

img {
  object-fit: cover;
  object-positon: center;
}

You can see the demo here: https://833jx.csb.app/

3 years ago

4 years ago

4 years ago