fit-media

Introduce

fit-media is an react wrapper component for img or video element, which adjust media's display dimensions to fit wrapper element.

ex.

<div style={{width: 100, height: 100}}>
  <FitMedia mode="auto" src="http://a.com/b.jpg">
</div>

In mode auto, if original size of image is 200 x 100, then the display size is 100 x 50, when in other modes display differently.

Usage

import FitMedia from 'fit-media';
// fill the wrapper element
<FitMedia type="img" src="x.jpg" mode="fill" />

// scale media, maybe overflow the wrapper element, the overflow part of media will not show.
<FitMedia type="video" src="x.mp4" mode="scale" />

// fit width of the wrapper element
<FitMedia src="x.jpg" mode="fitWidth" />

// fit height of the wrapper element
<FitMedia src="x.jpg" mode="fitHeight" />

Style

less

@import '~fit-media/index.less';

css

@import '~fit-media/dist/index.css';

js

import 'fit-media/index.less';

import 'fit-media/dist/index.css';