Калькулятор Соотношения Сторон (Aspect Ratio)
Калькулятор соотношения сторон (aspect ratio) для изображений и видео — рассчитайте ширину или высоту с сохранением пропорций, определите соотношение любого изображения, получите готовый CSS-код и проверьте полосы letterbox. Бесплатно, без регистрации.
Популярные
Социальные сети
Печать и бумага
Кино и видео
Ширина (px)
1920
Высота (px)
1080
Мегапиксели
2.07
Готовый код
Скачать шаблон PNG
Создаёт PNG-изображение в точно выбранном соотношении сторон, чистое и без разметки. Полезно как шаблон кадрирования или основа для дизайна. Длинная сторона — 2048px.
Об этом инструменте
Бесплатный онлайн-калькулятор соотношения сторон (aspect ratio) для тех, кто работает с видео, дизайном и веб-разработкой. Инструмент решает пропорцию между соотношением (16:9, 4:3, 1:1, 21:9 и десятками других) и полями ширины и высоты: введите один размер — другой рассчитается мгновенно с сохранением пропорций изображения. Также можно определить соотношение сторон любого существующего разрешения — достаточно указать ширину и высоту, и инструмент автоматически сведёт к минимальной форме. Помимо расчёта, он генерирует готовый CSS-код для вставки, показывает превью в реальном времени и вычисляет полосы letterbox — сколько чёрного поля остаётся при вписывании контента в контейнер с другим соотношением. Всё работает в браузере, без регистрации.
Возможности
Как работает расчёт соотношения сторон
Соотношение сторон — это отношение ширины к высоте, записанное в виде двух чисел через двоеточие. В 16:9, например, на каждые 16 единиц ширины приходится 9 единиц высоты. Расчёт — простая пропорция: высота получается из ширины × (9 ÷ 16), ширина — из высоты × (16 ÷ 9). Чтобы определить соотношение любого изображения, ширина и высота делятся на их наибольший общий делитель — например, 1920×1080 сводится к минимальной форме 16:9. Именно этот принцип применяет калькулятор, чтобы любое масштабирование проходило без искажений.
Сценарии использования
Наиболее распространённые сценарии использования калькулятора соотношения сторон в повседневной работе тех, кто создаёт визуальный контент и пишет код:
- Монтаж и экспорт видеоКонвертировать мастер 4K в HD, настроить разрешения экспорта и найти правильную высоту широкоэкранного кадра без искажения изображения.
- Баннеры и адаптивная вёрсткаОпределить высоту баннера по фиксированной ширине и сгенерировать CSS aspect-ratio, который сохраняет пропорции на любом экране.
- Контент для социальных сетейНастроить Story 9:16 (1080×1920px), ленту Instagram 4:5 (1080×1350px) и превью YouTube 16:9 (1280×720px) перед экспортом, избегая нежелательных обрезок при публикации.
- Адаптивное встроенное видеоСгенерировать шаблон iframe с пропорциональным padding для встраивания видеоплееров, подстраивающихся под ширину контейнера.
- Производительность и Core Web VitalsЗаполнить атрибуты width и height изображений, чтобы зарезервировать место в верстке и уменьшить累积ное смещение макета (CLS).
- Печать и вёрсткаРассчитать пропорциональные размеры для A4, фотографий и печатных материалов на основе известного значения.
Как использовать
Выберите соотношение
Введите два числа соотношения или нажмите один из пресетов, организованных по контексту. Превью и код обновятся мгновенно.
Введите один размер
Заполните ширину или высоту. Противоположное поле рассчитается автоматически с сохранением выбранного соотношения.
Скопируйте код
Используйте кнопки копирования, чтобы перенести CSS aspect-ratio, атрибуты изображения или адаптивный iframe прямо в проект.
Проверьте letterbox (по желанию)
Включите расчёт полос, введите размер контейнера и посмотрите, сколько чёрного поля остаётся при вписывании контента.
Часто задаваемые вопросы
Соотношение сторон — это отношение ширины к высоте изображения, видео или экрана. Оно записывается в виде двух чисел через двоеточие, например 16:9 или 4:3. Первое число обозначает пропорциональную ширину, второе — высоту. Соотношение 16:9 не указывает реальный размер в пикселях — только то, что ширина всегда в 16/9 раз больше высоты: будь то видео 1280×720 или 3840×2160.
Нужно умножить ширину на высоту соотношения и разделить на ширину соотношения. Для ширины 1200px при 16:9 расчёт выглядит так: 1200 × 9 ÷ 16 = 675px высоты. Калькулятор делает это автоматически: выберите соотношение, введите ширину — высота появится уже рассчитанной. Обратный путь — найти ширину по высоте — следует той же логике с переставленными членами.
Это соотношения с разными форматами. 4:3 почти квадратное — стандарт старых телевизоров и мониторов. 16:9 — текущий широкоэкранный формат, используемый почти во всём онлайн-видео, на телевидении и в смартфонах в горизонтальной ориентации. 21:9 — ультраширокий, более вытянутый, распространённый на мониторах для продуктивности и в фильмах с кинематографической атмосферой. Чем больше разница между двумя числами, тем более вытянутым и панорамным получается изображение.
Это чёрные полосы, которые появляются, когда контент отображается в пространстве с другим соотношением сторон без обрезки. Letterbox — горизонтальные полосы сверху и снизу, характерные при просмотре широкоэкранного фильма на более квадратном экране. Pillarbox — вертикальные полосы по бокам, которые появляются при отображении более квадратного видео на широкоэкранном экране. Калькулятор точно указывает, сколько пикселей полос остаётся в каждом случае.
CSS-свойство aspect-ratio резервирует пространство элемента в нужном соотношении без необходимости задавать высоту. Для блока 16:9 достаточно написать aspect-ratio: 16 / 9 — браузер сам рассчитает высоту исходя из доступной ширины. Это современный способ сохранять адаптивные пропорции, заменяющий старый трюк с padding-bottom в процентах. Калькулятор генерирует эту строку уже с подставленными значениями выбранного соотношения.