@odopod/odo-object-fit

Fits media elements (img, video). It polyfills CSS' object-fit: cover; If the browser supports object-fit, it will not run.

Usage no npm install needed!

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

README

Odo Object Fit

Fits media elements (img, video). It polyfills CSS' object-fit: cover; If the browser supports object-fit, it will not run. The media element should have full width and height as well as the object-fit property.

Install

npm install @odopod/odo-object-fit --save

Quick Start

.my-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

import OdoObjectFit from '@odopod/odo-object-fit';

// Cover a single element.
OdoObjectFit.cover(myElement);

// Cover multiple media elements.
OdoObjectFit.cover([myElement, thatOtherElement]);

Documentation

Visit the Odo component directory for demos, code examples, and documentation.