@verndale/object-fit

Object fit contain and cover

Usage no npm install needed!

<script type="module">
  import verndaleObjectFit from 'https://cdn.skypack.dev/@verndale/object-fit';
</script>

README

@verndale/object-fit

npm version npm bundle size GitHub license npm

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/