logo@krutoo/utils

scaleRectToFit

Takes "target" rectangle and "area" rectangle and returns rectangle that has same ratio as "target" but fits to "area" size.

Works like CSS rule object-fit, like contain by default.

import { scaleRectToFit } from '@krutoo/utils';

const target = { width: 10, height: 10 };
const area = { width: 100, height: 20 };

scaleRectToFit(target, area); // { width: 20, height: 20 }

// to make target rect cover area rect
scaleRectToFit(target, area, 'cover'); // { width: 100, height: 100 }

This function is useful for example when you need to scale some element on the page to fit other element with saving the original ratio.