This package provides methods below:
- Calculate bounding rectangle of the resized image having
object-fit
andobject-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.
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%' }
*/
npm install
npm test
git clone git@github.com:erhangundogan/get-object-fit-rect.git
cd get-object-fit-rect
npm install
npm run build
npm test