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
, andnone
. -
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
andonLoad
. - Other image attributes, such as
crossorigin
,loading
,sizes
,srcset
,usemap
, etc… - CSS background images.