getObjectFitRect

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 [email protected]:erhangundogan/get-object-fit-rect.git
cd get-object-fit-rect
npm install
npm run build
npm test