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 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