react-fitted-img

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

Usage no npm install needed!

<script type="module">
  import reactFittedImg from 'https://cdn.skypack.dev/react-fitted-img';
</script>

README

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)

:information_source: 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.