Главная » Статьи » Пропорциональное изменение размера с помощью переменных CSS

Пропорциональное изменение размера с помощью переменных CSS

Пропорциональное изменение размера с помощью переменных CSS

От автора: в этом фрагменте я хочу поделиться с вами тем, что я делаю при изменении размеров элементов в DevTools браузера.

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

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

В DevTools браузера вы можете изменить значение переменной —size, и это повлияет и на width, и на height. См. макет ниже для визуального сравнения CSS и приложения Sketch.

Пропорциональное изменение размера с помощью переменных CSS

В Sketch вам нужно активировать блокировку, чтобы поддерживать одинаковое значение для обоих параметров.

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

Пропорциональное изменение размера с помощью переменных CSS

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

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

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

Соотношение сторон = 186/79 = 2,35

Затем мы заменим соотношения с помощью функции CSS calc().

Пропорциональное изменение размера с помощью переменных CSS

.rect { --size: 186px; /* [1] */ --aspect-ratio: 2.35; /* [2] */ width: var(--size); /* [3] */ height: calc(var(--size) / var(--aspect-ratio)); /* [4] */
}

Если вы хотите поэкспериментировать с описанным выше в браузере, вот демонстрация на CodePen.

Автор: Ahmad Shadeed

Источник: https://ishadeed.com

Редакция: Команда webformyself.