aspect ratio correction что это
Кнопка Pixel Aspect Correction
Что делает эта кнопка? Это коррекция соотношения пикселя в композиции. По умолчанию viewer показывает физический размер композиции (квадратный пиксель 1,00), например, 720х576, но так как размер пикселя может изменяться, к примеру, быть вытянутым 1,46, то эта коррекция позволяет правильно отобразить композицию в окне предпросмотра.
Создадим две разных композиции, первую с размером 720 на 576 и квадратным пикселем:
Вот так выглядит окно предпросмотра этой композиции:
Вторая композиция с такими же размерами, но с широким 1,46 пикселем:
Теперь взгляните как выглядит это окно предпросмотра:
Сразу видно, что элементы «сужены», это происходит из-за того, что по умолчанию АЕ, отображает физический размер в композиции. А так как при Pixel Aspect пиксель не квадратный, а вытянутый, то нужно скорректировать это окно предпросмотра:
Обычно это актуально для изготовления ТВ роликов, где технические требования указывают на использование dv pal формата с разными соотношениями пикселя. Обычные HD ролики для интернета практически всегда используют квадратный пиксель, поэтому коррекция предпросмотра не требуется.
aspect-ratio [quirksmode]
На момент написания aspect-ratio поддерживается в Chrome 90, Safari Technology Preview и Firefox 88, если установить флаг aspect-ratio в about: config. Вам понадобится один из этих браузеров, чтобы увидеть примеры ниже, за исключением запасного, который должен работать во всех браузерах, поддерживающих настраиваемые свойства.
Слабая декларация
Значение CSS-свойства aspect-ratio — слабая декларация. Если у контейнера указаны ширина и высота, браузер будет использовать эти значения и проигнорирует указанное значение соотношения сторон. Ширина и высота могут декларироваться с помощью явных значений width и height или иными способами.
aspect-ratio
Здесь и далее в примерах слайдером над контейнером можно изменять его ширину, чтобы посмотреть, что происходит с блоками внутри него.
Округление
Даже когда aspect-ratio работает нормально, браузер должен вычислить целое число пикселей устройства для ширины и высоты контейнера. Дробные части отсекаются, поэтому рассчитанное соотношение сторон контейнера не может бывает точным на 100%.
В примерах в этом тексте, можно часто увидеть узкую красную полосу, выглядывающую из-под фонового изображения. Это изображение имеет такое же соотношение сторон, что и контейнер, в котором оно размещено, но, очевидно, использует другой способ вычисления. В обычных условиях эти крошечные различия часто не видны невооруженным глазом, поэтому их можно игнорировать.
grid aspect-ratio и min- и max-height
box-sizing: border-box
Теперь мы подобрались к более сложной теме, изначально открытой Ana Tudor — и всю эту статью лучше прочитать.
width может возвращать ширину только содержимого без отступов ( padding ) и границы (при box-sizing: content-box; по умолчанию) или ширину контента + padding + border (при box-sizing: border-box ). В общем, последнее — то, что нужно.
aspect-ratio и box-sizing
Поскольку отступы одинаковы со всех четырех сторон, это может нарушить соотношение сторон контейнера. Это зависит от определения box-sizing для контейнера. Если используется box-sizing: content-box (по умолчанию), то у ширины и высоты будет правильное соотношение сторон, но они при этом определяют только область содержимого. Со всех сторон будет добавляться равное количество отступов, и соотношение сторон нарушится.
apect-ratio в flexbox
В flex- или grid-контексте может показаться, что aspect-ratio не работает. Фактически, именно эти проблемы и побудили написать эту статью.
Посмотрите на пример ниже. Не работает! О, паника! Что происходит?
flex aspect-ratio
Если будете использовать любое другое значение, высота блоков будет установлена автоматически и у них будет правильное соотношение сторон. flex-start — наиболее очевидный выбор, а дополнительные параметры можно найти в отличном руководстве по flexbox на CSS Tricks.
flex aspect-ratio и align-items
flex, aspect-ratio и height: min-content
aspect-ratio и grid
В grid-контексте aspect-ratio сталкивается с теми же проблемами, что и в среде flexbox, только еще и с ошибками браузера. Можно ожидать такого же поведения, что и в контексте flexbox, но на деле происходит не совсем то же самое.
grid, aspect-ratio и align-items
Если у всех контейнеров в приведенном ниже примере будет одинаковая ширина и высота, это устранит ошибки. Одинаковая высота у них по причинам, которые объяснялись выше в разделе flexbox, а grid в этом отношении (можно надеяться) работает так же.
grid aspect-ratio с багами браузера
Запасной вариант
«Написав этот запасной вариант, я обнаружил, что Ana Tudor написала примерно то же самое в своей статье. Я имею в виду, почему я вообще пытаюсь соревноваться с такими ужасно умными людьми, как она? Но я пришел к этому самостоятельно, честно.» — Peter-Paul Koch
Ядро запасного варианта — это CSS, написанный ниже. Справедливое предупреждение: это решение только слегка протестировано; от замысла к успешному выполнению потрачено примерно 30 минут, хотя ещё 90 минут ушло на проблему с настраиваемыми свойствами.
Дополнительный уродлив, но необходим. Если ваши контейнеры с пропорциональным соотношением сторон не содержат текста, вы можете его убрать.
Хитрость здесь в том, что процентное значение рассчитывается относительно ширины родительского элемента. Если блок занимает всю ширину своего родителя, вы можете взять эту ширину, умножить ее на 1, разделенное на соотношение сторон (например, 9/16, когда соотношение сторон составляет 16/9) и преобразовать результат в проценты. Теперь отступ растягивает прямоугольник до желаемого соотношения сторон.
А о невероятном количестве скобок, которые нужны в строке с padding-top можно вообще написать отдельную статью.
Working with aspect ratios
An aspect ratio specifies the ratio of width to height. Video and still picture frames have a frame aspect ratio. The pixels that make up the frame have a pixel aspect ratio (sometimes referred to as PAR). Different video recording standards use different aspect ratios. For example, you record video for television in either a 4:3 or 16:9 frame aspect ratio. For more information, see Frame aspect ratio.
When a project is created in Premiere Pro, you set the frame and pixel aspect. Once these ratios are set, you cannot change them for that project. However, you can change the aspect ratio of a sequence. You can also use assets created with different aspect ratios in the project.
Premiere Pro automatically tries to compensate for the pixel aspect ratio of source files. If an asset still appears distorted, you can manually specify its pixel aspect ratio. Reconcile pixel aspect ratios before reconciling frame aspect ratios, because an incorrect frame aspect ratio can result from a misinterpreted pixel aspect ratio.
Types of aspect ratios
Commonly used aspect ratios are:
Widescreen (16:9)
It is the standard aspect ratio commonly shared by online videos, documentaries, and films. It captures a large amount of data with details.
Vertical (9:16)
It is the video recorded on your phone.
Fullscreen (4:3)
It is the aspect ratio that was used on television before widescreen was used. It focused on a particular element at a time.
Square (1:1)
It is a perfect square ratio that is commonly used on Instagram.
Anamorphic (2.40:1)
It is a wide widescreen often used in movies. It is similar to 16:9 but the top and bottom are cropped. This effect gives it a cinematic feel.
Working with aspect ratios
某些 Creative Cloud 应用程序、服务和功能在中国不可用。
An aspect ratio specifies the ratio of width to height. Video and still picture frames have a frame aspect ratio. The pixels that make up the frame have a pixel aspect ratio (sometimes referred to as PAR). Different video recording standards use different aspect ratios. For example, you record video for television in either a 4:3 or 16:9 frame aspect ratio. For more information, see Frame aspect ratio.
When a project is created in Premiere Pro, you set the frame and pixel aspect. Once these ratios are set, you cannot change them for that project. However, you can change the aspect ratio of a sequence. You can also use assets created with different aspect ratios in the project.
Premiere Pro automatically tries to compensate for the pixel aspect ratio of source files. If an asset still appears distorted, you can manually specify its pixel aspect ratio. Reconcile pixel aspect ratios before reconciling frame aspect ratios, because an incorrect frame aspect ratio can result from a misinterpreted pixel aspect ratio.
Types of aspect ratios
Commonly used aspect ratios are:
Widescreen (16:9)
It is the standard aspect ratio commonly shared by online videos, documentaries, and films. It captures a large amount of data with details.
Vertical (9:16)
It is the video recorded on your phone.
Fullscreen (4:3)
It is the aspect ratio that was used on television before widescreen was used. It focused on a particular element at a time.
Square (1:1)
It is a perfect square ratio that is commonly used on Instagram.
Anamorphic (2.40:1)
It is a wide widescreen often used in movies. It is similar to 16:9 but the top and bottom are cropped. This effect gives it a cinematic feel.
Working with aspect ratios
An aspect ratio specifies the ratio of width to height. Video and still picture frames have a frame aspect ratio. The pixels that make up the frame have a pixel aspect ratio (sometimes referred to as PAR). Different video recording standards use different aspect ratios. For example, you record video for television in either a 4:3 or 16:9 frame aspect ratio. For more information, see Frame aspect ratio.
When a project is created in Premiere Pro, you set the frame and pixel aspect. Once these ratios are set, you cannot change them for that project. However, you can change the aspect ratio of a sequence. You can also use assets created with different aspect ratios in the project.
Premiere Pro automatically tries to compensate for the pixel aspect ratio of source files. If an asset still appears distorted, you can manually specify its pixel aspect ratio. Reconcile pixel aspect ratios before reconciling frame aspect ratios, because an incorrect frame aspect ratio can result from a misinterpreted pixel aspect ratio.
Types of aspect ratios
Commonly used aspect ratios are:
Widescreen (16:9)
It is the standard aspect ratio commonly shared by online videos, documentaries, and films. It captures a large amount of data with details.
Vertical (9:16)
It is the video recorded on your phone.
Fullscreen (4:3)
It is the aspect ratio that was used on television before widescreen was used. It focused on a particular element at a time.
Square (1:1)
It is a perfect square ratio that is commonly used on Instagram.
Anamorphic (2.40:1)
It is a wide widescreen often used in movies. It is similar to 16:9 but the top and bottom are cropped. This effect gives it a cinematic feel.