Какое разрешение соответствует 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. Режим поиска недостающей стороны с готовыми соотношениями даёт точные пиксельные значения.

Калькулятор соотношения сторон

Приведите размер к соотношению сторон, найдите недостающую ширину или высоту или впишите соотношение в контейнер — с готовым кодом CSS.

Калькулятор соотношения сторон работает полностью в вашем браузере. Размеры обрабатываются на вашем устройстве и никогда не загружаются.

Открыть калькулятор CSS clamp()

Об инструменте Калькулятор соотношения сторон

Калькулятор соотношения сторон работает во всех трёх направлениях, откуда возникает эта задача. Дайте ему ширину и высоту — он упростит соотношение через наибольший общий делитель и, что важно, распознает почти совпадающие случаи: 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

Как использовать Калькулятор соотношения сторон

Выберите направление: размер → соотношение, недостающая сторона или вписать в блок
Введите то, что вам известно
Посмотрите результат и стандартные размеры для этого соотношения
Скопируйте CSS, если он нужен для вёрстки

Пример

Ввод

16:9, width 1000

Результат

Height 563 px · CSS: aspect-ratio: 16 / 9; · padding hack 56.25%

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. Режим поиска недостающей стороны с готовыми соотношениями даёт точные пиксельные значения.

Связанные инструменты

Калькулятор CSS clamp — Строит плавное значение clamp() из min, max и вьюпортов
Генератор CSS Grid — Визуально проектирует сетку и копирует CSS grid-template
Генератор Border Radius — Создавайте простой, поугловой или в форме блоба CSS border-radius с предпросмотром
Генератор Open Graph — Генерируйте мета-теги Open Graph и Twitter с предпросмотром социальной карточки.
Изменение размера видео — Измените размер видео для Reels, YouTube, квадрата и других с полями в браузере.
Обрезка изображений — Свободная область или фиксированное соотношение, полное разрешение.