https://github.com/erhangundogan/get-object-fit-rect
Image object-fit and object-position utilities
https://github.com/erhangundogan/get-object-fit-rect
crop getboundingclientrect getboundingrect getobjectfitrect object-fit object-position positioning replaced-element replaced-elements
Last synced: 4 months ago
JSON representation
Image object-fit and object-position utilities
- Host: GitHub
- URL: https://github.com/erhangundogan/get-object-fit-rect
- Owner: erhangundogan
- License: mit
- Created: 2021-07-08T12:14:29.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-10-23T15:55:50.000Z (over 4 years ago)
- Last Synced: 2025-10-11T16:47:54.609Z (8 months ago)
- Topics: crop, getboundingclientrect, getboundingrect, getobjectfitrect, object-fit, object-position, positioning, replaced-element, replaced-elements
- Language: TypeScript
- Homepage: https://codesandbox.io/s/get-object-fit-rect-cmnn1?file=/src/App.js
- Size: 865 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
getObjectFitRect
================
[![License][license-src]][license-href]
[![Build Status][build-src]][build-href]
This package provides 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][demo-href]
# 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.
```typescript
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
```bash
npm install
```
# Tests
```bash
npm test
```
# Development
```bash
git clone git@github.com:erhangundogan/get-object-fit-rect.git
cd get-object-fit-rect
npm install
npm run build
npm test
```
[license-src]: https://img.shields.io/badge/license-MIT-brightgreen.svg
[license-href]: LICENSE.md
[demo-href]: https://codesandbox.io/s/get-object-fit-rect-cmnn1?file=/src/App.js
[build-src]: https://dev.azure.com/erhangundogan/get-object-fit-rect/_apis/build/status/erhangundogan.get-object-fit-rect?branchName=main
[build-href]: https://dev.azure.com/erhangundogan/get-object-fit-rect/_build/latest?definitionId=1&branchName=main