get-object-fit-rect

Replaced elements object-fit and object-position utilities

Usage no npm install needed!

<script type="module">
  import getObjectFitRect from 'https://cdn.skypack.dev/get-object-fit-rect';
</script>

README

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