CSS: Пропорциона­ль­ное масштабиро­ва­ние с css-переменными

Предположим, вы создаёте макет в HTML и CSS, и хотите поэкспериментировать с шириной и высотой иконки. Учтите следующее:

.icon {
  --size: 32px;
  width: var(--size);
  height: var(--size);
}

В браузере вы можете изменять значение переменной --size, и это повлияет как на ширину, так и на высоту. Посмотрите на изображение внизу для визуального сравнения CSS и Sketch.

В Sketch вам нужно нажать блокировку, что бы высота и ширина изменялись пропорционально. В CSS просто менять значение переменной --size.

Разные значения ширины и высоты

Не все формы идеальные квадраты, что если вы хотите изменить размер элемента с разными значениями ширины и высоты? Что ж, соотношение сторон поможет.

Во-первых, вам нужно рассчитать соотношение сторон между шириной и высотой элемента.

Например, у нас есть прямоугольник. Его ширина 186px, а высота 79px. Задача состоит в том, что бы найти соотношение между этими двумя значениями.

Соотношение сторон = ширина / высота
Соотношение сторон = 186 / 79 = 2.35

.rect {
  --size: 186px;
  --aspect-ratio: 2.35;
  width: var(--size);
  height: calc(var(--size) / var(--aspect-ratio));
}

В переменной --size задаём ширину элемента, а в --aspect-ratio — вычисленное ранее соотношение сторон. Далее подставляем в свойство width переменную --size, а в height высчитываем высоту на основании ширины и отношения сторон.

Если хотите поиграть с примером этого кода, вот ссылка на CodePen

Более современное решение с использованием с использованием CSS свойства aspect-ratio

Первая часть статьи, перевод "Proportional Resizing with CSS Variables", опубликованного в августе 2020, следующая часть основанная на моём личном опыте.

На данный момент есть более современное решение — использование CSS свойства aspect-ratio. Если мы делаем проект под современные браузеры, то оно поддерживается всеми браузерами, кроме Internet Explorer. Если вы заботитесь о поддержке более ранними версиями браузеров, то лучше использовать переменные. На всякий случай добавлю таблицу браузерной поддержки CSS переменных и aspect-ration:

Используя aspect-ratio для задания размера элемента нам нужна только ширина или высота и соотношение сторон. Предыдущий фрагмент CSS кода сокращается на одну строку, мы убираем высчитывание высоты, так как за нас это делает браузер и переменную --aspect-ratio, меняем на свойство aspect-ratio оставив в присваивании то же значение.

.rect {
  --size: 186px;
  aspect-ratio: 2.35;
  width: var(--size);
}

Выглядит лучше, не так ли? Ссылка на CodePen с aspect-ratio.