@verndale/object-fit

Pollyfill for object-fit and object-position.

Settings

| 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 |

Usage

Installing using npm

npm i @verndale/object-fit

And then simply import the pollyfill.

JS

import '@verndale/object-fit';

HTML

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

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

CSS

Customize your properties for browsers that do support these properties.

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

Demo

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