React component for fitting and positioning images with cross-browser support.
import FittedImg from 'react-fitted-img';
<FittedImg src="/path/to/image.png" alt="Thing" fit="cover" position="0 50%" />;
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.
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.