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