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%" />;
srcrequired URL of the image you want to embed (MDN)
altoptional text description of the image (MDN)
fitoptional sets how the image should be resized to fit its container. Supports the object-fit values:
heightoptional the intrinsic height of the image in pixels. (MDN)
positionoptional the alignment of the image's contents within the element's box. Supports object-position values.
widthoptional the intrinsic width of the image in pixels. (MDN)
ℹ️Additional props will be passed down.
For browsers that don't support
object-position, the fallback doesn't support:
- Event handlers like
- Other image attributes, such as
- CSS background images.