Have ideas to improve npm?Join in the discussion! »

    react-fitted-img

    2.0.0 • Public • Published

    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.

    Install

    npm i react-fitted-img

    DownloadsWeekly Downloads

    8

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    21.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar