Калькулятор соотношения сторон работает во всех трёх направлениях, откуда возникает эта задача. Дайте ему ширину и высоту — он упростит соотношение через наибольший общий делитель и, что важно, распознает почти совпадающие случаи: 1366×768 упрощается до бесполезного 683:384, но калькулятор также сообщит, что это «фактически 16:9» — именно тот ответ, который вам действительно нужен. Дайте соотношение и одну сторону — он найдёт другую в целых пикселях. Дайте соотношение и контейнер — он вернёт наибольший размер, который в него впишется. В любом случае вы получите стандартные размеры для этого соотношения (от 1280×720 до 3840×2160 для 16:9) и готовый к копированию код CSS: современное свойство aspect-ratio плюс процент padding-top для классического приёма адаптивной вёрстки.
Возможности
Размеры → точное соотношение и ближайшее распространённое соотношение
Соотношение + одна сторона → другая сторона в целых пикселях
Соотношение + контейнер → наибольший вписывающийся размер
Готовые варианты от 16:9 до анаморфного 2,39:1
Список стандартных размеров с гарантированно чётной высотой
CSS-свойство aspect-ratio и процент для приёма padding-hack
Как использовать Калькулятор соотношения сторон
Выберите направление: размер → соотношение, недостающая сторона или вписать в блок
Введите то, что вам известно
Посмотрите результат и стандартные размеры для этого соотношения
56,25% — это 9÷16, классическое число для адаптивного видео.
Частые ошибки и устранение неполадок
1366×768 упрощается до 683:384 вместо 16:9. — 683:384 — это и есть точный ответ: это разрешение действительно не является 16:9. Строка «фактически 16:9» даёт практический ответ; оба значения показываются, потому что оба верны.
Найденная сторона получается нечётной, и видеокодировщик её не принимает. — H.264 и подобные форматы требуют чётных размеров. Используйте список стандартных размеров, где высота округляется до чётного значения, либо сдвиньте введённое значение на один пиксель.
Видео 4:3 в плеере с 16:9 показывает чёрные полосы. — Это корректное поведение — вписывание 4:3 в 16:9 оставляет боковые полосы. Убрать их означает обрезать часть содержимого.
Часто задаваемые вопросы
Какое разрешение соответствует 16:9 при заданной ширине?
Умножьте ширину на 9/16: 1280→720, 1920→1080, 2560→1440, 3840→2160. Калькулятор решает это для любой ширины или высоты.
Как сохранить соотношение сторон элемента в CSS?
Современный способ — одна строка: aspect-ratio: 16 / 9. Классический приём задаёт контейнеру padding-top в 56,25% и абсолютно позиционирует содержимое внутри. Калькулятор выдаёт оба варианта, подобранных под ваше соотношение.
Почему мониторы заявляют 16:9, хотя пиксели говорят другое?
Такие панели, как 1366×768, приближаются к 16:9 с точностью до процента — этого достаточно для маркетинга и полноэкранного видео. Калькулятор показывает и точное соотношение, и ближайшее общепринятое, чтобы расхождение было видно.
Какие соотношения сторон нужны соцсетям?
Видео в ленте тяготеет к 1:1 или 4:5, истории и короткие ролики — 9:16, горизонтальные загрузки — 16:9, а кинематографический материал — 21:9 или 2,39:1. Режим поиска недостающей стороны с готовыми соотношениями даёт точные пиксельные значения.