Nuanced Pterodactyl Monk

    get-object-fit-rect
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.3 • Public • Published

    getObjectFitRect

    License Build Status

    This package provides a methods below:

    • Calculate bounding rectangle of the resized image having object-fit and object-position CSS styles.
    • Get relative position on the resized image if it's visible.
    • Determine if the image's aspect-ratio has changed.
    • Parse getComputedStyle.objectPosition into x and y values.

    Demo

    Usage

    Functions:

    • getObjectFitRect: Absolute/relative rect information for the resized image.
    • getRelativePosition: Relative position of the actual point or returns undefined if it's not visible.
    • isResized: Returns true if the image's aspect ratio has changed.
    • parseObjectPosition: Parse getComputedStyle.objectPosition string into x and y values.
    const { absolute, relative } = getObjectFitRect = ({
      intrinsicSize, // image naturalWidth and image naturalHeight
      renderedSize, // expected image width and expected image height
    });
    /*
    const absolute: AbsoluteResult = { top: 0, left: 35, bottom: 0, right: 35, width: 30, height: 100 };
    const relative: RelativeResult = { top: 0, left: '35%', height: '100%', width: '30%' }
    */

    Install

    npm install

    Tests

    npm test

    Development

    git clone git@github.com:erhangundogan/get-object-fit-rect.git
    cd get-object-fit-rect
    npm install
    npm run build
    npm test

    Install

    npm i get-object-fit-rect

    DownloadsWeekly Downloads

    8

    Version

    2.1.3

    License

    MIT

    Unpacked Size

    23.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • erhangundogan