Калькулятор соотношения сторон (сохранение пропорций при изменении

Задайте целевое соотношение и одно из измерений — второе заполнится автоматически. Обратное направление работает так же. Полезно для видео, кадрирования фото и адаптивной веб-вёрстки.

Ширина соотношенияВысота соотношенияШиринаВысота

Соотношение сторон: 16:9
Десятичное: 1,7778
Размеры: 1920 × 1080

Как это работает

Что такое соотношение сторон

Соотношение сторон описывает ширину относительно высоты: 16:9 означает 16 единиц в ширину на 9 единиц в высоту. Одно и то же соотношение работает при любом размере — 1920×1080 и 800×450 оба имеют соотношение 16:9. Сохранение соотношения сторон при изменении размера предотвращает растягивание или сжатие изображений и лежит в основе адаптивного дизайна.

Принимаются целые числа (16:9) или десятичные дроби (1,78:1) для соотношения, а также любой размер ширины/высоты. Редактируйте любое поле — остальные обновятся для сохранения соотношения. Десятичное соотношение (ширина / высота) отображается для использования в выражениях CSS calc() или инструментах видеомонтажа.

Распространённые соотношения и где они применяются

16:9 — современные HDTV, мониторы компьютеров, YouTube, большинство фильмов с 2009 года. Стандарт для почти всего сегодня.

9:16 — вертикальное видео для Instagram Stories, TikTok, YouTube Shorts. Обратная сторона 16:9 для контента под смартфоны.

1:1 — квадрат. Стандарт ленты Instagram до 2021 года. Обложки альбомов, фото профиля.

4:3 — старые телевизоры и мониторы до HD. До сих пор используется для контента в классическом стиле.

3:2 — стандарт зеркальных камер. 35-мм плёнка. Большие форматы печати.

21:9 — широкоформатный кинематографический. Фильмы, снятые анаморфным объективом. Некоторые мониторы для ПК.

Почему CSS aspect-ratio важен

Современный CSS имеет свойство aspect-ratio: 16/9; — задайте соотношение и позвольте браузеру вычислить высоту из ширины (или наоборот). Это устраняет необходимость старого хака с padding-bottom и незаменимо для адаптивных встроенных элементов и плейсхолдеров изображений, предотвращающих сдвиг макета.

Cumulative Layout Shift (CLS) — один из показателей Core Web Vitals. Встроенные видео, изображения без размеров и реклама могут вызывать CLS — исправьте это, задав явные ширину/высоту (браузер использует их для вычисления соотношения) или применив CSS aspect-ratio.

Частые вопросы

›В чём разница между 16:9 и 1,78:1?

Одно и то же соотношение, разные обозначения. 16/9 = 1,778. Форма с двоеточием принята в телевидении и вебе; десятичная форма — в кино.

›Как сохранить соотношение сторон в CSS?

Используйте свойство aspect-ratio: img { aspect-ratio: 16/9; width: 100%; height: auto; }. Изображение заполнит ширину контейнера, высота подстроится под соотношение.

›Почему видео выглядит неправильно на телевизоре 4:3?

Большинство современных видео имеют формат 16:9. На экране 4:3 они либо показываются с чёрными полосами сверху и снизу (letterbox), либо с полосами по бокам, либо растягиваются. Настройки телевизора определяют, какой вариант применяется.

›Можно ли использовать нецелые соотношения?

Да — введите 1,5 или 2,39. Калькулятор обрабатывает их как десятичные; упрощённое соотношение отображается только для целочисленных соотношений.

›Что такое «соотношение сторон пикселей»?

Отдельная концепция: форма отдельного пикселя. Современные дисплеи используют квадратные пиксели (1:1). Некоторые устаревшие форматы SD-видео использовали несквадратные пиксели. Этот калькулятор работает с соотношением сторон отображения, а не пикселей.

›Что такое «кинематографический» вид?

21:9 (точнее 2,39:1 или 2,40:1) — шире, чем HDTV. Распространён в современных блокбастерах. Стриминговые сервисы часто показывают фильмы в этом соотношении.

›Почему Reels в Instagram и TikTok используют 9:16?

Потому что телефоны обычно держат вертикально. 9:16 заполняет весь экран телефона контентом; 16:9 оставляет полосы сверху и снизу на вертикальном телефоне.

›Данные отправляются на сервер?

Нет. Расчёт выполняется локально.