Switch branches/tags
@odopod/odo-window-events@1.2.0 @odopod/odo-window-events@1.1.0 @odopod/odo-window-events@1.0.3 @odopod/odo-window-events@1.0.2 @odopod/odo-window-events@1.0.1 @odopod/odo-viewport@1.1.1 @odopod/odo-viewport@1.1.0 @odopod/odo-viewport@1.0.3 @odopod/odo-viewport@1.0.2 @odopod/odo-viewport@1.0.1 @odopod/odo-video@1.2.2 @odopod/odo-video@1.2.1 @odopod/odo-video@1.2.0 @odopod/odo-video@1.1.1 @odopod/odo-video@1.1.0 @odopod/odo-video@1.0.1 @odopod/odo-tap@1.1.2 @odopod/odo-tap@1.1.1 @odopod/odo-tap@1.1.0 @odopod/odo-tap@1.0.3 @odopod/odo-tap@1.0.2 @odopod/odo-tap@1.0.1 @odopod/odo-tabs@2.0.2 @odopod/odo-tabs@2.0.1 @odopod/odo-tabs@2.0.0 @odopod/odo-tabs@1.0.3 @odopod/odo-tabs@1.0.2 @odopod/odo-tabs@1.0.1 @odopod/odo-sticky-headers@1.2.0 @odopod/odo-sticky-headers@1.1.0 @odopod/odo-sticky-headers@1.0.3 @odopod/odo-sticky-headers@1.0.2 @odopod/odo-sticky-headers@1.0.1 @odopod/odo-share@1.1.1 @odopod/odo-share@1.1.0 @odopod/odo-share@1.0.3 @odopod/odo-share@1.0.2 @odopod/odo-share@1.0.1 @odopod/odo-scroll-feedback@1.2.0 @odopod/odo-scroll-feedback@1.1.0 @odopod/odo-scroll-feedback@1.0.3 @odopod/odo-scroll-feedback@1.0.2 @odopod/odo-scroll-feedback@1.0.1 @odopod/odo-scroll-animation@1.2.0 @odopod/odo-scroll-animation@1.1.0 @odopod/odo-scroll-animation@1.0.2 @odopod/odo-scroll-animation@1.0.1 @odopod/odo-sassplate@2.0.1 @odopod/odo-sassplate@2.0.0 @odopod/odo-sassplate@1.1.1 @odopod/odo-reveal@2.0.2 @odopod/odo-reveal@2.0.1 @odopod/odo-reveal@2.0.0 @odopod/odo-reveal@1.0.3 @odopod/odo-reveal@1.0.2 @odopod/odo-reveal@1.0.1 @odopod/odo-responsive-images@1.2.0 @odopod/odo-responsive-images@1.1.0 @odopod/odo-responsive-images@1.0.3 @odopod/odo-responsive-images@1.0.2 @odopod/odo-responsive-images@1.0.1 @odopod/odo-responsive-classes@1.1.1 @odopod/odo-responsive-classes@1.1.0 @odopod/odo-responsive-classes@1.0.3 @odopod/odo-responsive-classes@1.0.2 @odopod/odo-responsive-classes@1.0.1 @odopod/odo-responsive-attributes@1.1.1 @odopod/odo-responsive-attributes@1.1.0 @odopod/odo-responsive-attributes@1.0.3 @odopod/odo-responsive-attributes@1.0.2 @odopod/odo-responsive-attributes@1.0.1 @odopod/odo-pointer@1.2.1 @odopod/odo-pointer@1.2.0 @odopod/odo-pointer@1.1.0 @odopod/odo-pointer@1.0.3 @odopod/odo-pointer@1.0.2 @odopod/odo-pointer@1.0.1 @odopod/odo-on-swipe@1.1.2 @odopod/odo-on-swipe@1.1.1 @odopod/odo-on-swipe@1.1.0 @odopod/odo-on-swipe@1.0.3 @odopod/odo-on-swipe@1.0.2 @odopod/odo-on-swipe@1.0.1 @odopod/odo-object-fit@1.1.1 @odopod/odo-object-fit@1.1.0 @odopod/odo-object-fit@1.0.3 @odopod/odo-object-fit@1.0.2 @odopod/odo-object-fit@1.0.1 @odopod/odo-module@1.2.1 @odopod/odo-module@1.2.0 @odopod/odo-module@1.1.0 @odopod/odo-module@1.0.1 @odopod/odo-hotspots@1.2.1 @odopod/odo-hotspots@1.2.0 @odopod/odo-hotspots@1.1.3 @odopod/odo-hotspots@1.1.2 @odopod/odo-hotspots@1.1.1 @odopod/odo-hotspots@1.1.0 @odopod/odo-hotspots@1.0.2 @odopod/odo-hotspots@1.0.1
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
demos
dist
src
test
README.md
coverage.json
package.json
yarn.lock

README.md

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.