Inkognitoss
@Inkognitoss
Full-stack разработчик.

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

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

Спасибо!
  • Вопрос задан
  • 336 просмотров
Пригласить эксперта
Ответы на вопрос 2
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
cover
картинка с размерами x1 и y1 (ширина и высота)
контейнер с размерами x2 и y2
сравниваем отношение ширины к высоте
если x1/y1 < x2/y2 значит вписываем по ширине.
(xN новая ширина картинки, yN новая высота картинки)
xN = x2
yN = x2/x1*y1
это пропорциональное увеличение
По вертикали нужно "отрезать": k = yN - y2

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

contain симметрично наоборот.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы