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

Предыдущий
вопрос Следующий
вопрос

Для того чтобы рассчитать масштабирование изображения в Canvas таким образом, как это делается с помощью CSS свойств contain и cover, вам потребуется использовать некоторую математику.

Для свойства contain (изображение вмещается в контейнер полностью):
Если вы хотите масштабировать изображение так, чтобы его ширина или высота соответствовала ширине или высоте контейнера, без обрезки изображения, можно использовать следующий подход:

Рассчитайте соотношение сторон контейнера (containerRatio) и соотношение сторон изображения (imageRatio).Если imageRatio < containerRatio, то масштабируйте изображение по высоте: newHeight = containerHeight, newWidth = containerHeight * imageRatio.Если imageRatio >= containerRatio, то масштабируйте изображение по ширине: newWidth = containerWidth, newHeight = containerWidth / imageRatio.

Для свойства cover (изображение покрывает контейнер полностью):
Если вы хотите масштабировать изображение так, чтобы оно полностью покрывало контейнер, возможно вам придется обрезать изображение. Для этого можно использовать следующий подход:

Рассчитайте соотношение сторон контейнера (containerRatio) и соотношение сторон изображения (imageRatio).Если imageRatio < containerRatio, то масштабируйте изображение по ширине: newWidth = containerWidth, newHeight = containerWidth / imageRatio.Если imageRatio >= containerRatio, то масштабируйте изображение по высоте: newHeight = containerHeight, newWidth = containerHeight * imageRatio.

Надеюсь, эти математические формулы помогут вам достичь желаемого масштабирования изображений в Canvas. Удачи!