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

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

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

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

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

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

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

Войти через TM ID
Похожие вопросы
Eagle Dynamics Москва
от 80 000 руб.
ATSAL Москва
от 125 000 до 175 000 руб.
от 200 000 до 300 000 руб.
14 нояб. 2018, в 09:48
60000 руб./за проект
14 нояб. 2018, в 08:38
3000 руб./за проект