Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-object-fit-cover with all npm packages installed. Try it out:

var reactObjectFitCover = require("react-object-fit-cover")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-object-fit-cover v1.0.0

A React component that mimics `object-fit: cover`

react-object-fit-cover

A React component that mimics object-fit: cover. (Like background-size: cover, but for any element, not just images.)

npm install --save react-object-fit-cover

Please note that this is not a polyfill; it just mimics the behavior of object-fit: cover.

Usage

Pass a React element and an aspect ratio, and the element will be resized to cover the area of the containing element.

You must also give the component an explicit width and height, either by passing a style prop or using CSS.


var React = require('react');
var ObjectFitCover = require('react-object-fit-cover');

var MyComponent = React.createClass({

  render() {

    var video = (
      <video>
        <source src="/url/to/video.mp4" type="video/mp4" />
      </video>
    );

    var style = {
      position: 'fixed',
      width: '100%',
      height: '100%',
    }

    return (
      <ObjectFitCover
        object={video} // This could be any element or component
        objectAspectRatio={16/9} // Correct aspect ratio is required
        style={style}
      />
    );
  }

});

License

MIT

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free