Что такое калькулятор соотношения сторон CSS?
Этот инструмент превращает любую ширину и высоту в пикселях в аккуратное упрощённое соотношение сторон — например, 16:9 или 4:3. Кроме того, он рассчитывает классический процент padding-top, с помощью которого адаптивные контейнеры (видео, iframe, обёртки для изображений) сохраняют заданные пропорции. Этот приём активно использовали до того, как современное CSS-свойство aspect-ratio получило широкую поддержку в браузерах.
Как пользоваться калькулятором
Введите исходную ширину и высоту в пикселях. Калькулятор сокращает соотношение до минимальных значений с помощью наибольшего общего делителя (НОД), показывает десятичное соотношение (ширина ÷ высота) и выдаёт процент padding-top, который можно сразу вставить в ваш CSS.
Разбираем формулу
Сначала находим НОД ширины и высоты. Поделив оба числа на этот НОД, получаем упрощённое соотношение. Например, у чисел 1920 и 1080 общий делитель равен 120, поэтому соотношение сводится к 16:9. Приём с padding-top использует формулу $$\text{высота} \div \text{ширина} \times 100$$ потому что процентное значение отступа в CSS всегда рассчитывается относительно ширины элемента.
Пример расчёта
Для изображения 1920×1080: НОД(1920, 1080) = 120. Соотношение:
$$\text{Соотношение} = \frac{1920}{120} : \frac{1080}{120} = \mathbf{16:9}$$Десятичное значение = 1920 ÷ 1080 ≈ 1,7778. Padding-top:
$$\text{Padding-top} = 1080 \div 1920 \times 100 = \mathbf{56{,}25\%}$$То есть адаптивная обёртка будет использовать padding-top: 56.25%.
Частые вопросы
Зачем использовать padding-top вместо свойства aspect-ratio? Приём с padding-top работает во всех браузерах, включая самые старые. В современных проектах можно просто написать aspect-ratio: 16 / 9;.
От чего считается процент — от ширины или высоты? Процент вертикальных отступов в CSS всегда считается относительно ширины родительского блока. Именно поэтому в формуле стоит высота ÷ ширина.
А если числа не сокращаются красиво? Любые ширина и высота дадут корректное соотношение — просто оно может не совпадать с привычными названиями вроде 16:9. В таких случаях пригодится десятичное значение.
