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