Как выглядит действие свойств CSS: contain и cover с математической точки зрения?

Question

[Александр Карпов]

В CSS есть два интересных алгоритма масштабирования background, это contain и cover.
Допустим если я хочу повторить такое поведение в canvas с изображением вставленным с помощью drawImage, то какой формуле следует прибегнуть чтобы рассчитать такое пропорциональное масштабирование. Я всё понимаю, но математически записать не получается, чтобы идеально было. Уверен справлюсь чуть позже, но хотелось побыстрее, вдруг кто-то уже сталкивался с таким вопросом.

Спасибо!

Answer 1

[Дмитрий Лузанов]

Cover, source

Answer 2

[Ankhena]

cover
картинка с размерами x1 и y1 (ширина и высота)
контейнер с размерами x2 и y2
сравниваем отношение ширины к высоте
если x1/y1 < x2/y2 значит вписываем по ширине.
(xN новая ширина картинки, yN новая высота картинки)
xN = x2
yN = x2/x1*y1
это пропорциональное увеличение
По вертикали нужно "отрезать": k = yN - y2

Если больше, то тоже самое для высоты.

contain симметрично наоборот.