react-fitted-img

React component for fitting and positioning images with cross-browser support.

Usage

import FittedImg from 'react-fitted-img';

<FittedImg src="/path/to/image.png" alt="Thing" fit="cover" position="0 50%" />;

Props

• src required URL of the image you want to embed (MDN)
• alt optional text description of the image (MDN)
• fit optional sets how the image should be resized to fit its container. Supports the object-fit values: fill (default), contain, cover, and none.
• height optional the intrinsic height of the image in pixels. (MDN)
• position optional the alignment of the image's contents within the element's box. Supports object-position values.
• width optional the intrinsic width of the image in pixels. (MDN)

ℹ️ Additional props will be passed down.

Limitations

For browsers that don't support object-fit/object-position, the fallback doesn't support:

• Event handlers like onError and onLoad.
• Other image attributes, such as crossorigin, loading, sizes, srcset, usemap, etc…
• CSS background images.