Главная / Работа с видео / Определение соотношения сторон видео
Основные параметры

Пропорции видеокадра между шириной и высотой

Узнайте соотношение ширины и высоты видеокадра.

Бесплатный лимит - 2,00 МБ. Свыше лимита - 50 ₽.

Пропорции
видеокадра

Загрузите видео и получите точное соотношение сторон по пиксельным размерам кадра.

Видео
Разрешение
Пропорция

Определение пропорций видео

Загрузите видеофайл — сервер определит фактическое разрешение кадра и его соотношение сторон.

Результат
—
Загрузите видео, чтобы определить соотношение сторон.

Пропорции видеокадра между шириной и высотой представляют собой геометрическое соотношение сторон видео, которое определяет форму прямоугольника рабочей области. В англоязычной технической документации этот параметр обозначается как Aspect Ratio. Инструмент вычисляет точную пропорциональную зависимость по заданным линейным габаритам кадра. Это позволяет сразу определить рабочий стандарт видеопотока до начала монтажа или публикации.

В качестве входных данных для расчета используются два числовых значения: ширина и высота кадра, выраженные в пикселях (px).

По введенным пиксельным габаритам алгоритм выполняет математическое сокращение и выводит результат в каноническом формате записи ширина:высота. Основное назначение этой операции - точная идентификация формата кадра при подготовке исходных файлов. Корректное вычисление соотношения сторон исключает геометрические искажения объектов при финальном рендеринге. Также полученный показатель необходим для предварительной проверки соответствия видеоролика жестким техническим параметрам экранов, контейнеров веб-плееров и целевых платформ вещания.

Определение соотношения сторон видео

Математический алгоритм расчета пропорций кадра по ширине и высоте

Математическая основа вычисления пропорций видеокадра сводится к представлению линейных габаритов в виде обыкновенной несократимой дроби. Исходная ширина выступает числителем, а высота - знаменателем. Чтобы перевести крупные пиксельные значения в компактную форму записи, применяется поиск НОД для обоих чисел.

НОД представляет собой максимальное целое положительное число, на которое ширина и высота делятся без остатка. В вычислительной математике для быстрого поиска этого значения используется классический алгоритм Евклида, основанный на последовательном делении большего числа на меньшее с анализом остатка. Когда остаток от деления становится равным нулю, последний ненулевой делитель фиксируется как искомый НОД.

После нахождения общего делителя выполняется правило сокращения дроби:

  • Исходное значение ширины в px делится на вычисленный НОД для получения левого члена пропорции.
  • Исходное значение высоты в px делится на тот же НОД для получения правого члена пропорции.
  • Полученные взаимно простые целые числа записываются через двоеточие, формируя канонический вид ширина:высота.

Помимо целочисленной дроби в видеопроизводстве применяется десятичное соотношение, необходимое для работы с кинематографическими стандартами. Для его получения исходная ширина напрямую делится на высоту без промежуточного сокращения через НОД. Вычисленный десятичный множитель берется за переменную X, а высота приравнивается к единице. В результате формируется стандартизированная запись формата X:1, которая наглядно показывает, во сколько раз горизонтальная сторона кадра больше или меньше вертикальной.

Пошаговый пример вычисления

Процесс преобразования пиксельных габаритов в каноническую и десятичную запись демонстрирует расчет на базе стандартного разрешения 1920 px по ширине и 1080 px по высоте:

Этап вычисления Математическая операция Полученный результат
Фиксация входных параметров Ширина = 1920 px, Высота = 1080 px Исходная дробь 1920/1080
Поиск НОД по алгоритму Евклида 1920 ÷ 1080 = 1 (остаток 840); 1080 ÷ 840 = 1 (остаток 240); 840 ÷ 240 = 3 (остаток 120); 240 ÷ 120 = 2 (остаток 0) НОД = 120
Сокращение ширины и высоты 1920 ÷ 120 = 16; 1080 ÷ 120 = 9 Каноническая пропорция 16:9
Расчет десятичного множителя 1920 ÷ 1080 = 1.777... (с усечением до сотых - 1.77) Десятичный формат 1.77:1

Принцип пропорционального масштабирования через коэффициент масштаба

Найденная базовая пропорция служит основой для изменения разрешения видеопотока при рендеринге или компрессии. Чтобы увеличить или уменьшить линейные размеры кадра без нарушения его геометрии, используется единый коэффициент масштаба. Это числовой множитель, на который одновременно умножаются или делятся обе стороны кадра.

Если за основу берется уже сокращенная каноническая пропорция, то в роли коэффициента масштаба выступает сам НОД. Умножение базовых частей соотношения на любой произвольный целый множитель дает новые пиксельные габариты с идентичной геометрией. При масштабировании отталкиваются от одной известной целевой стороны: например, если требуется уменьшить ширину с 1920 px до 1280 px при сохранении пропорции 16:9, сначала вычисляется новый шаг масштаба (1280 ÷ 16 = 80), после чего на него умножается базовая доля высоты (9 × 80 = 720 px). Если при расчете новых габаритов к ширине и высоте применить разные коэффициенты масштаба, исходная дробь изменится, что приведет к визуальному сжатию или растяжению объектов в кадре.

Взаимосвязь разрешения видео, геометрии пикселя и пропорций дисплея (SAR, DAR, PAR)

Прямое математическое отношение горизонтального и вертикального числа пикселей не во всех случаях определяет итоговую геометрию изображения на экране. Физическое разрешение видеофайла фиксирует только размерность пиксельной матрицы, записанной в потоке данных, тогда как видимая форма кадра зависит от геометрических пропорций каждого отдельного пикселя при выводе на экран.

Для точного разделения параметров хранения и визуализации видеопотока в цифровой обработке используются три взаимосвязанных показателя:

  • SAR - пропорция кадра, вычисленная исключительно по количеству пикселей по ширине и высоте без учета их физической формы. Именно этот показатель получается при прямом арифметическом сокращении пиксельных габаритов видео.
  • PAR - геометрическое отношение ширины отдельного пикселя к его высоте. В зависимости от стандарта кодирования элементарная точка матрицы может быть строго квадратной или вытянутой по одной из осей.
  • DAR - финальное соотношение сторон изображения, которое формируется на экране при воспроизведении видеопотока с учетом заданной геометрии пикселей.

Математическая зависимость между SAR, PAR и DAR

Итоговые пропорции отображаемого видеокадра напрямую зависят от соотношения записанной пиксельной сетки и коэффициента формы пикселя. Базовая формула связи этих трех параметров имеет следующий вид:

DAR = SAR × PAR

При необходимости вычислить требуемую геометрию пикселя для приведения известной пиксельной матрицы к целевому формату экрана используется обратное выражение:

PAR = DAR ÷ SAR

В современных цифровых видеоформатах для веб-среды, мониторов и мобильных устройств применяется стандарт квадратного пикселя, при котором PAR равен 1:1 (в десятичном выражении - 1). Подстановка единицы в базовую формулу (DAR = SAR × 1) приводит к тому, что расчетное соотношение по ширине и высоте в пикселях полностью совпадает с отображаемой пропорцией на дисплее. Если видеофайл с квадратными пикселями имеет разрешение 1920 на 1080 px, его SAR составляет 16:9, и при воспроизведении он формирует на экране идентичный визуальный формат DAR 16:9.

Особенности расчета пропорций для анаморфного видео

Расхождение между математическим расчетом по пикселям и реальной картинкой возникает при работе с анаморфным видео, а также с телевизионными и оптическими форматами записи, где пиксели имеют прямоугольную форму (PAR отличен от 1:1). В таких видеопотоках изображение намеренно сжимается по горизонтали на этапе записи для экономии битрейта или соответствия спецификациям носителя, а при воспроизведении видеоплеер растягивает кадр до правильных пропорций на основе метаданных PAR.

При проверке анаморфного файла прямое деление ширины на высоту в пикселях дает только технический показатель SAR, который не равен финальному визуальному DAR. Сравнение параметров для стандартного и анаморфного видеопотоков демонстрирует, как форма пикселя меняет итоговую геометрию при одинаковых или нестандартных пиксельных габаритах:

Тип видеопотока и условный размер матрицы Расчет по пикселям (SAR) Геометрия пикселя (PAR) Расчет по формуле (SAR × PAR) Итоговая пропорция экрана (DAR)
Стандартное цифровое видео (1920 × 1080 px) 16:9 1:1 (квадратный) (16 ÷ 9) × (1 ÷ 1) = 16 ÷ 9 16:9
Анаморфный поток с горизонтальным растяжением (1440 × 1080 px) 4:3 4:3 (прямоугольный, вытянут по ширине) (4 ÷ 3) × (4 ÷ 3) = 16 ÷ 9 16:9
Цифровой видеопоток со сжатием кадра (720 × 576 px) 5:4 16:15 (прямоугольный, близкий к квадрату) (5 ÷ 4) × (16 ÷ 15) = 80 ÷ 60 = 4 ÷ 3 4:3
Широкоэкранный анаморфный поток (720 × 576 px) 5:4 64:45 (прямоугольный, сильно вытянут) (5 ÷ 4) × (64 ÷ 45) = 320 ÷ 180 = 16 ÷ 9 16:9

Приведенные соотношения показывают, почему при подготовке и перекодировании анаморфных исходников нельзя опираться только на деление ширины матрицы на ее высоту. Если видеоредактор или плеер проигнорирует неквадратный PAR и интерпретирует файл 1440 × 1080 px как матрицу с квадратными пикселями (PAR 1:1), изображение будет выведено на экран в пропорции SAR 4:3 вместо задуманного DAR 16:9, из-за чего все объекты в кадре окажутся неестественно сжатыми по горизонтали.

Классификация стандартов соотношения сторон и ориентации видеокадра

После вычисления итоговой пропорции кадра полученную дробь или десятичный индекс сопоставляют с отраслевыми стандартами. Направление композиции напрямую зависит от того, какой из габаритов матрицы преобладает: при превышении ширины над высотой формируется горизонтальная развертка, при доминировании высоты - вертикальная, а при их равенстве образуется равносторонний квадратный кадр. Классификация результатов расчета помогает определить целевую среду показа и аппаратную совместимость видеопотока.

Горизонтальная альбомная ориентация и широкоэкранные форматы

Альбомная ориентация характеризуется тем, что горизонтальный размер кадра превышает вертикальный, поэтому десятичный множитель пропорции всегда больше единицы. Такая геометрия соответствует бинокулярному полю зрения человека и охватывает телевизионное вещание, компьютерные мониторы и панорамные панели.

В производственной практике и параметрах дисплеев закрепились следующие горизонтальные соотношения:

  • 16:9 - базовый стандарт HDTV, цифрового телевидения, стриминговых видеохостингов и большинства современных мониторов. Универсальная пропорция для записи и воспроизведения горизонтального веб-видео.
  • 4:3 - классический телевизионный SD-формат, исторически применявшийся в кинескопах, ранних видеокамерах и первой пленочной кинохронике. В современных проектах используется при оцифровке архивов или как художественный прием, а также остается штатным режимом съемки при задействовании всей площади некоторых сенсоров.
  • 16:10 (или 8:5) и 3:2 - рабочие пропорции профессиональных дисплеев, ноутбуков и фотоматриц. Формат 16:10 востребован на экранах рабочих станций за счет дополнительного вертикального пространства для таймлайнов и панелей управления, тогда как 3:2 перешел в видеопроизводство из классической 35-миллиметровой фотографии и гибридных беззеркальных камер.
  • 21:9 (Ultra-wide) и 32:9 - сверхширокие панорамные форматы. Обозначение 21:9 применяется к мониторам и видеопотокам, рассчитанным на отображение киноконтента без горизонтальных полей, а пропорция 32:9 эквивалентна двум соединенным по горизонтали кадрам 16:9 и используется в симуляторах, полиэкранных инсталляциях и специализированных панорамных панелях.

Кинематографические пропорции кадра

В киноиндустрии соотношение сторон принято записывать в десятичном виде относительно единицы высоты, что упрощает сравнение кадров с разной оптической и проекционной геометрией. Кинематографические стандарты разделяются на кашетированные, оптические анаморфные и крупноформатные спецификации.

К основным экранным форматам кинопроизводства относятся:

Обозначение пропорции Отраслевое название Геометрическая и производственная специфика
1.85:1 Flat Академический широкий экран, широко применяемый в американском и европейском кинопрокате. По геометрии немного шире телевизионного стандарта 16:9 (1.77:1).
2:1 Univisium Промежуточный стандарт, предложенный как математический компромисс между телевизионным 16:9 и широким киноформатом. Активно используется при производстве оригинальных сериалов и фильмов для стриминговых сервисов.
2.35:1, 2.39:1, 2.40:1 Scope / CinemaScope Широкоэкранные анаморфные и цифровые панорамные форматы. Значение 2.35:1 относится к более ранним спецификациям кинопленки, 2.39:1 является действующим стандартом цифровой кинопроекции DCI, а 2.40:1 выступает округленным обозначением того же кадра в технической документации.
1.43:1 Крупноформатный пленочный стандарт Высокий кадр, характерный для горизонтальной 70-миллиметровой кинопленки и специализированных проекционных залов с гигантскими экранами, обеспечивающий максимальный вертикальный охват сцены.

Вертикальная портретная ориентация и квадратные форматы

Когда при расчете габаритов видео высота в пикселях оказывается больше ширины, кадр переходит в вертикальную (портретную) категорию, а его десятичный коэффициент становится меньше единицы. Появление и стандартизация таких пропорций обусловлены эргономикой смартфонов, которые пользователи удерживают одной рукой в вертикальном положении без поворота корпуса.

Флагманским стандартом этой группы выступает 9:16 (Vertical Video) - точная геометрическая инверсия горизонтального формата 16:9, повернутого на 90 градусов. Такой кадр полностью занимает площадь стандартного мобильного дисплея при полноэкранном просмотре. Вторым распространенным вариантом является пропорция 4:5 (Portrait, десятичный вид 0.8:1), которая формирует умеренно вытянутый по вертикали прямоугольник, предназначенный для встраивания видеороликов в вертикально прокручиваемые новостные ленты.

Отдельную группу образуют равносторонние и близкие к ним пропорции, где разница между измерениями сведена к минимуму. Формат 1:1 (Square) фиксируется при полном совпадении ширины и высоты кадра в пикселях. Квадратное видео нейтрально к ориентации экрана: оно одинаково отображается как на десктопных мониторах, так и на мобильных устройствах без необходимости поворачивать телефон. Близкое к квадрату соотношение 5:4 (десятичный множитель 1.25:1) исторически встречалось в ранних жидкокристаллических мониторах, а также остается техническим соотношением пиксельной матрицы в стандартных телевизионных исходниках до применения коэффициентов коррекции формы пикселя.

Таблица соответствия типовых пиксельных разрешений и пропорций видео

Стандартизированные форматы кадра в цифровом видеопроизводстве формируют фиксированную сетку пиксельных габаритов. Каждой геометрической пропорции соответствует ряд типовых разрешений, различающихся детализацией изображения при сохранении идентичного соотношения сторон. При условии квадратного пикселя сопоставление ширины и высоты позволяет мгновенно определить как классическую дробь, так и десятичный коэффициент без промежуточных вычислений.

Справочная матрица ниже объединяет базовые разрешения видео в пикселях и соответствующие им расчетные пропорции для горизонтальных, вертикальных, квадратных и ультрашироких форматов:

Разрешение (ширина × высота в px) Обозначение стандарта Точная расчетная пропорция Маркетинговый класс формата Десятичный вид
640 × 360 nHD 16:9 16:9 1.78:1
1280 × 720 HD 720p 16:9 16:9 1.78:1
1920 × 1080 FHD 1080p 16:9 16:9 1.78:1
2560 × 1440 QHD 1440p 16:9 16:9 1.78:1
3840 × 2160 4K UHD 16:9 16:9 1.78:1
720 × 1280 Вертикальный 720p 9:16 9:16 0.56:1
1080 × 1920 Вертикальный 1080p 9:16 9:16 0.56:1
1080 × 1080 Квадратный 1:1 1:1 1.00:1
1080 × 1350 Портретный 4:5 4:5 0.80:1
2560 × 1080 WFHD 64:27 21:9 2.37:1
3440 × 1440 WQHD 43:18 21:9 2.39:1
5120 × 1440 DQHD 32:9 32:9 3.56:1

Горизонтальная линейка 16:9 строится на строгой кратности базовым значениям 16 и 9. Например, переход от 640×360 к 1280×720 и далее к 3840×2160 увеличивает общее количество точек на площади кадра, но при сокращении на наибольший общий делитель каждое из этих разрешений неизменно дает соотношение 16:9. Аналогичная математическая точность сохраняется в вертикальных кадрах 720×1280 и 1080×1920 (ровно 9:16), в портретном разрешении 1080×1350 (при делении сторон на 270 получается 4:5), а также в сверхшироком стандарте 5120×1440, где сокращение на 160 приводит к точной пропорции 32:9.

Математическое расхождение в ультрашироких форматах класса 21:9

При проверке ультрашироких видеофайлов по точным пиксельным габаритам обнаруживается несовпадение между общепринятым коммерческим названием стандарта и фактическим результатом математического сокращения дроби. Обозначение 21:9 является исключительно маркетинговым упрощением, введенным производителями дисплеев для удобного визуального сопоставления со стандартом 16:9 (общий знаменатель 9 наглядно показывает увеличение ширины экрана). С точки зрения арифметики дробь 21:9 сократима на 3 и равна 7:3, что в десятичном выражении дает бесконечную периодическую дробь 2.33:1.

Реальные пиксельные матрицы и стандарты видеокодирования опираются на четные значения высоты, унаследованные от стандартов 1080p и 1440p, а также на требование кратности размеров кадра блокам пикселей (8 или 16) для аппаратного сжатия видеопотока. В результате при прямом вычислении пропорций для ультрашироких разрешений получаются иные несократимые дроби:

  • Для разрешения 2560 × 1080 наибольший общий делитель равен 40. Деление 2560 на 40 и 1080 на 40 дает каноническую пропорцию 64:27. В десятичном виде отношение 2560 к 1080 составляет 2.37:1. Чтобы при высоте 1080 px получить математические 21:9 (7:3), ширина кадра должна была бы составлять 2520 px, однако индустрия зафиксировала стандарт на отметке 2560 px.
  • Для разрешения 3440 × 1440 наибольший общий делитель составляет 80. Сокращение сторон (3440 ÷ 80 и 1440 ÷ 80) формирует дробь 43:18, а десятичный коэффициент равен примерно 2.38:1 (при округлении до сотых - 2.39:1). Истинная пропорция 7:3 при высоте 1440 px потребовала бы ширины 3360 px.

По этой причине при точном расчете габаритов видео с разрешением 2560×1080 или 3440×1440 итогом операции всегда выступают дроби 64:27 и 43:18. Оба результата являются технически эталонными для мониторов и видеопроектов категории 21:9, а незначительная разница между коэффициентами 2.37:1 и 2.38:1 обусловлена подгонкой ширины кадра под стандартную сетку пикселей.

Применение расчета пропорций при подготовке видео для социальных сетей и платформ

Проверка точного соотношения ширины и высоты видеокадра необходима на этапе предпубликационного контроля (префлайта) видеофайлов перед их загрузкой на видеохостинги и в рекламные кабинеты. Модерационные алгоритмы и медиаплееры платформ жестко привязаны к фиксированным геометрическим контейнерам. Если в результате расчета габаритов рендера выявляется нестандартная дробь - например, из-за случайного смещения рамки экспорта на 2-4 px - платформа может отклонить рекламный креатив или принудительно изменить геометрию области просмотра.

Полученный результат вычисления пропорций сопоставляется с техническими спецификациями целевых площадок и конкретных мест размещения (плейсментов):

Платформа и рекламная сеть Плейсмент (тип контента) Требуемая пропорция кадра Типовые пиксельные габариты
YouTube Стандартные горизонтальные видео, встроенный плеер 16:9 1920 × 1080 px, 3840 × 2160 px
YouTube Вертикальная лента YouTube Shorts 9:16 (допустимо 1:1) 1080 × 1920 px
Instagram Reels и Stories 9:16 1080 × 1920 px
Instagram Посты в основной ленте и карусели 4:5, 1:1 (допустимо 1.91:1) 1080 × 1350 px, 1080 × 1080 px
TikTok Органическая лента и рекламные интеграции 9:16 1080 × 1920 px, 720 × 1280 px
Facebook и Facebook Ads Лента новостей (Feed), видео в потоке (In-Stream), карусель 4:5, 1:1, 16:9 1080 × 1350 px, 1080 × 1080 px, 1920 × 1080 px
Facebook Ads Рекламные объявления с внешними ссылками, Stories 1.91:1, 9:16 1200 × 628 px, 1080 × 1920 px
Vimeo Универсальный веб-плеер и портфолио 16:9, 2.39:1, 9:16, 1:1 1920 × 1080 px, 2560 × 1080 px, 1080 × 1920 px
X (Twitter) и LinkedIn Горизонтальные, квадратные и мобильные видеопосты 16:9, 1:1, 9:16, 4:5 1920 × 1080 px, 1200 × 1200 px, 1080 × 1350 px
Google Ads Адаптивные видеообъявления и кампании в видеосети 16:9, 9:16, 1:1 1920 × 1080 px, 1080 × 1920 px, 1080 × 1080 px

Особого внимания при проверке через соотношение сторон требуют рекламные форматы с дробным десятичным индексом 1.91:1, применяемые в Facebook Ads и Instagram. При базовом разрешении 1200 × 628 px математическое сокращение на наибольший общий делитель (4) дает несократимую дробь 300:157, что при делении ширины на высоту равняется коэффициенту 1.91:1. Предварительный пересчет пиксельных сторон гарантирует, что баннер или видеоролик пройдет автоматическую валидацию рекламного кабинета без сбоев.

Контроль композиции кадра и учет безопасных зон (Safe Zones)

Точное соблюдение расчетных пропорций напрямую влияет на сохранность внутрикадровой композиции и читаемость графических элементов. В вертикальных форматах 9:16 (YouTube Shorts, Reels, Stories, TikTok) видеопоток разворачивается на весь экран смартфона, а поверх самого изображения накладываются элементы пользовательского интерфейса приложения: кнопки взаимодействия, блок описания, название аудиодорожки, аватар профиля и строка поиска.

Для защиты важного контента от перекрытия интерфейсом при подготовке видео учитываются безопасные зоны (safe zones) - внутренние отступы от краев кадра, в пределах которых размещаются субтитры, логотипы, лица спикеров и призывы к действию. Разметка таких зон рассчитывается строго под эталонную пропорцию контейнера. Вычисление точного соотношения сторон перед экспортом решает сразу несколько прикладных задач видеопродакшена:

  • Защита от смещения графических слоев: если монтажная секвенция ошибочно настроена на пропорцию, отличную от целевых 9:16 или 4:5, при загрузке в плеер видео масштабируется, и титры, расположенные на границе безопасной зоны, уходят под кнопки интерфейса.
  • Максимизация полезной площади экрана в мобильной ленте: проверка и подготовка файла в пропорции 4:5 (1080 × 1350 px) вместо 1:1 (1080 × 1080 px) или 16:9 дает возможность занять больше вертикального пространства дисплея смартфона в лентах Instagram, Facebook и LinkedIn без обрезки ключевых объектов.
  • Сохранение геометрии при кроссплатформенном ресайзе: при адаптации одного мастер-ролика 16:9 под сетку форматов Google Ads (16:9, 1:1 и 9:16) точный расчет пиксельных сторон для каждой копии подтверждает, что композиционный центр и сетка безопасных зон перенесены в новые габариты без нарушения пропорций.

Влияние несовпадения пропорций на отображение кадра и веб-верстку видео

Когда определенная по ширине и высоте пропорция исходного видеофайла не совпадает с геометрией физического дисплея или контейнера веб-плеера, возникает конфликт габаритов. Поскольку видеопоток и область вывода имеют разную конфигурацию прямоугольника, отобразить кадр на всю площадь экрана без изменения его исходного вида невозможно. Для согласования размеров видео и контейнера применяются три базовых метода адаптации: добавление компенсирующих полей, принудительное кадрирование или деформация сетки кадра.

Компенсирующие поля, перекадрирование и деформация

Самый безопасный для композиции способ вписать видео в несовпадающий по пропорциям экран - масштабировать ролик целиком до границ контейнера с сохранением исходного соотношения сторон. Незаполненное пространство вокруг кадра при этом заливается фоновым цветом (обычно черным), образуя каше - компенсирующие полосы по краям. В зависимости от того, какой параметр исходного видео больше относительно экрана, возникает один из двух визуальных эффектов:

  • Эффект letterbox: появление горизонтальных черных полос сверху и снизу кадра. Возникает, когда соотношение сторон видео шире, чем пропорции экрана или плеера. Классический пример - воспроизведение широкоэкранного кинематографического файла с пропорцией 2.39:1 на стандартном мониторе или телевизоре 16:9.
  • Эффект pillarbox: появление вертикальных черных полей слева и справа от изображения. Происходит при размещении более узкого или вертикального видео в широком горизонтальном контейнере - например, при открытии архивной записи 4:3 или мобильного ролика 9:16 внутри стандартного горизонтального плеера 16:9.

Если наличие пустых полей недопустимо по требованиям дизайна или площадки, применяется кадрирование (кроп или перекадрирование). В этом случае видео масштабируется так, чтобы полностью закрыть площадь целевого контейнера, а выступающие за пределы рамки части изображения отсекаются. При размещении ролика 16:9 в вертикальном контейнере 9:16 обрезаются левая и правая стороны кадра; при вписывании вертикального видео в горизонтальный блок отсекаются верхняя и нижняя зоны. Такой подход требует контроля точки фокуса при монтаже: если сюжетно важные объекты или лица находятся ближе к краям исходного кадра, при автоматическом кропе по центру они окажутся за пределами видимой области.

Третий вариант - непропорциональное растягивание или сжатие кадра под габариты контейнера. При таком подходе ширина и высота видео независимо друг от друга приравниваются к ширине и высоте экрана без учета исходной дроби пропорций. Это сохраняет 100% пиксельного состава кадра и исключает появление черных полос, но нарушает геометрию: объекты в кадре вытягиваются по горизонтали (например, при растягивании файла 4:3 на экран 16:9) или сплющиваются по бокам.

Использование расчетных пропорций в CSS-верстке

Во фронтенд-разработке точное числовое соотношение ширины и высоты видео напрямую используется для создания адаптивных контейнеров и предотвращения визуального сдвига макета страницы во время загрузки медиафайла. До подгрузки метаданных видеоролика браузер не знает его габаритов, из-за чего блок плеера может схлопываться по высоте, а после инициализации файла - резко раздвигать текстовый контент. Чтобы зарезервировать место заранее, полученная при расчете пропорция передается в CSS-свойство aspect-ratio .

Синтаксис свойства принимает дробь в формате ширина / высота (например, aspect-ratio: 16 / 9 для горизонтального ролика или aspect-ratio: 9 / 16 для вертикального). Допускается также передача исходных пиксельных значений без предварительного сокращения (например, aspect-ratio: 1920 / 1080 ) или десятичного коэффициента, однако запись через каноническую сокращенную дробь делает код читаемым и сразу указывает на стандарт контейнера. Когда для родительского блока или самого тега video задана относительная ширина (например, width: 100% ) и указано свойство aspect-ratio , браузер вычисляет высоту элемента пропорционально текущей ширине экрана устройства.

video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background-color: #000000;
}

Если по условиям дизайна габариты HTML-контейнера жестко зафиксированы и не совпадают с расчетным соотношением сторон самого видеопотока, способ вписывания кадра внутри элемента регулируется CSS-свойством object-fit . Ниже приведено сравнение трех основных значений этого свойства и их влияния на геометрию видеокадра.

Значение CSS-свойства Принцип обработки габаритов кадра Визуальный результат при несовпадении пропорций Типичный сценарий применения
object-fit: contain Пропорциональное масштабирование видео до тех пор, пока оно целиком не поместится внутри контейнера Кадр виден полностью без искажений геометрии; по краям образуются поля letterbox или pillarbox Основной контент: обучающие видео, фильмы, обзоры, где важна сохранность всей площади кадра и титров
object-fit: cover Пропорциональное масштабирование видео до полного заполнения всей площади контейнера по большей стороне Геометрия объектов сохраняется, пустые поля отсутствуют, но выступающие края кадра обрезаются Фоновые видеоролики на первых экранах сайтов, превью-заставки, декоративные видео-баннеры
object-fit: fill Принудительное приравнивание ширины и высоты видео к ширине и высоте контейнера без сохранения пропорции Контейнер заполнен целиком без обрезки краев, но изображение непропорционально растянуто или сжато Технические текстуры и абстрактные фоны, где нарушение геометрических пропорций объектов незаметно

При использовании значения object-fit: cover по умолчанию обрезка выступающих частей видео происходит симметрично относительно центра кадра. Если ключевой объект смещен к одному из краев, в сочетании с ним применяется свойство object-position (например, object-position: top center или object-position: 20% 50% ), которое смещает точку фокуса внутри адаптивного контейнера и удерживает нужную область видео в видимой зоне.

Нужен другой
инструмент?

Откройте раздел видеоинструментов и выберите подходящий для другой задачи.

Все инструменты для видео