Replicate background-size: cover/contain (scale+crop) for canvas/CSS/Node/… on any type of media.
npm install intrinsic-scale[badge-gzip]: https://img.shields.io/bundlephobia/minzip/intrinsic-scale.svg?label=gzipped
[link-npm]: https://www.npmjs.com/package/intrinsic-scale
> Replicate background-size: cover/contain for canvas/CSS/Node/… on any type of media.
Many libraries that take care of replicating background-size/object-fit’s cover/contain have this functionality embedded. You can use this function anywhere, from the browser to calculate sizing on a canvas, to node when doing some image file resizing.
This module doesn't concern itself with getting the sizes or applying the values. You provide numbers, you get numbers.
``sh`
npm install intrinsic-scale
`js`
import resizeToFit from 'intrinsic-scale';
`js
/*
Given an 50px 50px element in a 100px 200px parent
To be contained by its parent it must be of size 100px 100px
and be positioned at 0px 50px to be centered.
*/
const source = {width: 50, y: 50};
const target = {width: 100, height: 200};
const { width, height, x, y } = resizeToFit('contain', source, target);
console.log(width, height, x, y);
//100 100 0 50
/*
Given an 50px 50px element in a 100px 200px parent
To be covered in its parent it must be of size 200px 200px
and be positioned at -50px 0px to be centered.
*/
const source = {width: 50, y: 50};
const target = {width: 100, height: 200};
const { width, height, x, y } = resizeToFit('cover', source, target);
console.log(width, height, x, y);
//200 200 -50 0
``
No dependencies. It works in the browser and in node.
* https://fregante.github.io/art-cropper/ — Crops images making them fill a pre-set area.