Package Exports
- get-object-fit-rect
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (get-object-fit-rect) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
getObjectFitRect
This package provides a 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.
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