что такое aspect ratio
Aspect ratio. Леттербо́ксинг. Соотношение сторон экрана, черные полосы + таблица форматов TV
Спасибо инвесторам из казино онлайн
Автор: mozin · Октябрь 11, 2015
Aspect ratio. Соотношение сторон экрана (aspect ratio) — это отношение ширины кадра к высоте.
Леттербо́ксинг (англ. Letterbox) — технология показа широкоэкранных кинофильмов по телевидению стандартной четкости с сохранением исходного соотношения сторон изображения. При такой технологии кинокадр занимает не всю площадь телеизображения, а сверху и снизу передаются черные каше, заполняющие остальной экран[1]. Термин «леттербоксинг» происходит от английского выражения «почтовый ящик» (англ. letter box), отражая конечный вид изображения, напоминающего узкую длинную щель для доставки корреспонденции.
Конечно еще сами форматы HD, Ultra HD, 4k, 8k.
4K TV FORMATS HD & SD FORMATS
Quad HD 3840×2160 HD 1920×1080
Full 4K 4096×2160 HD 1280×720
SD 640×480
Ultra HD 4K 3840 × 2160 16:9 (1,78:1)
4K CINEMA FORMATS
MP
Academy Horiz/Vert Aspect Per
Formats Resolution Ratio Frame
Standard 3626×2664 1.37:1 9.7
Flat 3996×2160 1.85:1 8.6
MP
Anamorphic Horiz/Vert Aspect Per
Formats Resolution Ratio Frame
Scope 4096X1714 2.39:1 7.0
2K CINEMA FORMATS
MP
Academy Horiz/Vert Aspect Per
Formats Resolution Ratio Frame
Standard 1828×1332 1.37:1 2.4
Flat 1998×1080 1.85:1 2.2
MP
Anamorphic Horiz/Vert Aspect Per
Formats Resolution Ratio Frame
Scope 2048×858 2.39:1 1.8
SDTV — Standard Definition TV — 480i
16. 704 x 480 16:9 30i Rect
17. 704 x 480 4:3 30i** Rect
18. 640 x 480 4:3 30i Square
** most popular formats
DVD — DV/MiniDV
720 x 480 x 30 fps (NTSC)
720 x 576 x 25 fps (PAL/SECAM)
Only 704 of the 720
horizontal pixels are visible.
D1 Broadcast Format
720 x 486 x 30 fps (NTSC)
720 x 576 x 25 fps (PAL/SECAM)
8K UHD (4320p)[2] имеет разрешение 7680×4320 (33,2 мегапикселя), которое превосходит предыдущий стандарт телевидения сверхвысокой четкости в 4 раза. В 2013 году скорость интернет каналов была пригодна для обеспечения нужд HDTV, поэтому развитие 8K UHD опирается на Спутниковое вещание для передачи данных.
10080 × 4320 (21:9) (43.5) мегапикселей
7680 × 4320 (16:9) (33.2) мегапикселей
8192 × 4320 (17:9) (35.3) мегапикселей
8192 × 5120 (16:10) (41.9) мегапикселей
8192 × 8192 (1:1) (67.1) мегапикселей
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 можно вообще написать отдельную статью.
CSS-свойство aspect-ratio
Соотношение сторон ( aspect-ratio ) обычно выражается двумя целыми числами с двоеточием: width:height или x:y. Наиболее распространенные соотношения сторон для фотографий — 4:3 и 3:2, а видео, как правило, имеют соотношение сторон 16:9 или 4:3.
Два изображения с одинаковым соотношением сторон. У одного размеры 634×951 пикселей, а у другого — 200×300 пикселей. У обоих соотношение сторон 2:3.
С появлением адаптивного дизайна поддержка соотношения сторон стала важной его составляющей: размеры изображений различаются, а размеры элементов меняются в зависимости от доступного пространства. Вот несколько случаев, когда важно поддерживать соотношение сторон:
Встраивание изображений
Значения initial и fill искажают изображение, чтобы заполнить пространство. Это приводит к тому, что изображение может оказаться становится сжатым и размытым. Не идеально.
object-fit: cover использует размер меньшей из сторон изображения, чтобы заполнить пространство, затем обрезает картинку, чтобы поместить ее в контейнер.
В случае object-fit: none изображение обрезается по центру (положение объекта по умолчанию) с естественным размером.
object-fit: cover часто используется для обеспечения хорошего единообразного интерфейса при работе с изображениями разных размеров, однако при этом может теряться часть информации (изображение обрезается по самым длинным краям).
Если какие-то детали на картинке важны (например, при работе с плоской укладкой косметических товаров), обрезка важного контента может оказаться недопустимой. Таким образом, идеальным вариантом были бы адаптивные изображения разных размеров, которые соответствовали бы пространству пользовательского интерфейса без обрезки.
Старый прием: сохранение соотношения сторон с padding-top
Чтобы сделать их отзывчивыми, можно использовать соотношение сторон. Это позволяет установить определенный размер соотношения и использовать остальную часть носителя на отдельной оси (высоте или ширине).
До настоящего времени широко распространенно кроссбраузерное решение для поддержания соотношения сторон в зависимости от ширины изображения, известное, как «Padding-Top Hack». Для этого решения требуется родительский контейнер и абсолютно спозиционированный дочерний контейнер. Далее требуется рассчитать соотношение сторон в процентах, чтобы установить его как верхнюю часть поля ( padding-top ). Например:
Теперь, когда разобрались со значениями соотношения сторон, их можно применить родительскому контейнеру. Рассмотрим следующий пример:
R этому html-коду подойдёт следующий CSS:
Обеспечение соотношения сторон с помощью aspect-ratio
Вычисление значения padding-top не очень интуитивно понятно и требует применение позиционирования. С помощью нового css-свойства aspect-ratio отношение сторон такая же задача решается иначе.
Использование aspect-ratio вместо padding-top намного понятнее и оставляет для свойства padding его обычное поведение.
Пример согласованности в сетке (grid)
Этот пример чётко работает с механизмами компоновки, такими как CSS Grid и Flexbox. Рассмотрим список с дочерними элементами, для которых требуется сохранить соотношение сторон 1:1, например сетку логотипов спонсоров:
Изображения в сетке внутри родительского элемента с разным соотношением сторон.
Пример предотвращения сдвига макета
Еще одна замечательная особенность css-свойства aspect-ratio — оно предоставляет возможность реализовать блоки-заглушки (placeholder) для предотвращения сдвига макета (CLS — Cumulative Layout Shift) и предоставления качественных веб-показателей. В первом примере демонстрируется загрузка ресурса из API и получается сдвиг макета, когда загрузка мультимедиа завершится. Проще говоря, текст и блоки страницы скачут и перемещаются, до тех пор, пока все ресурсы загружаются.
Видео о совокупном сдвиге макета, который происходит, когда для контейнера загружаемого ресурса не установлено соотношение сторон. Это видео записано с помощью эмуляции медленного соединения — сети 3G.
Применение css-свойства aspect-ratio устанавливает контейнеру ожидаемое соотношение сторон и предотвращает сдвиг макета после загрузки мультимедиа:
Пример использования атрибутов изображения для указания соотношения сторон
Завершение
Первый взгляд на aspect-ratio
Дата публикации: 2020-06-22
От автора: эй! Совершенно новое свойство, которое влияет на размер блока! Это важная вещь. Уже есть много способов создать блок с соотношением сторон (и я бы сказал, что это решение на основе пользовательских свойств является лучшим), но ни один из них не является особенно интуитивным и, конечно, не таким простым, как объявление одного свойства.
Итак, в то время, когда aspect-ratio (MDN, и не путать с версией медиа-запроса) готовится к выходу, я подумал, что полезно рассмотреть, как это работает.
Простое указание aspect-ratio для элемента вычисляет высоту на основе ширины auto
Без явной установки ширины у элемента все еще будет естественная авто width. Таким образом, высота может быть рассчитана из соотношения сторон и ширины рендеринга.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Если содержимое не вписывается при данном соотношении сторон, элемент все равно будет расширяться
Соотношение сторон в этой ситуации игнорируется, что на самом деле приятно. Вот почему тактика псевдо-элементов для соотношений сторон была популярна, она не подвергала нас опасности потери данных или неуклюжего отсечения, когда контента становилось слишком много.
Но если вы хотите ограничить высоту соотношением сторон, вы можете добавить min-height: 0;
Если элемент имеет либо высоту, либо ширину, то неизвестная сторона рассчитывается исходя из соотношения сторон.
Таким образом, aspect-ratio — это в основном способ установить другую сторону, когда у вас есть только одна.
Если элемент имеет как высоту, так и ширину, aspect-ratio игнорируются. Сочетание явной высоты и ширины «сильнее», чем соотношение сторон.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Факторинг в min-*и max-*
Всегда существуют пересечение между width, min-width и max-width (или версия height). Одно из них всегда «выигрывает». Как правило, это довольно интуитивно понятно.
Если вы установите width: 100px; и min-width: 200px; то min-width будет иметь приоритет. Итак, min-width либо игнорируется, потому что у вас большее значение, либо имеет приоритет. То же самое касается max-width: если вы установите, width: 100px; а max-width: 50px; то max-width имеет приоритет. Итак, max-width либо игнорируется, потому что у вас уже меньшее значение, либо имеет приоритет.
Похоже, что здесь действует общая интуитивность: свойства min-* и max-* либо имеют приоритет, либо не оказывают влияния на макет. И если они имеют приоритет, они сломают aspect-ratio.
СОДЕРЖАНИЕ
Некоторые общие примеры
При использовании телевизора, DVD и Blu-ray Disc преобразование форматов с неравным соотношением достигается за счет увеличения исходного изображения до заполнения области отображения принимаемого формата и отсечения любой лишней информации изображения ( масштабирование и обрезка ), путем добавления горизонтальных матов ( почтовый бокс ) или вертикальные маты ( pillarboxing ), чтобы сохранить соотношение сторон исходного формата, растягивая (следовательно, искажая) изображение, чтобы заполнить соотношение формата приема, или путем масштабирования с разными коэффициентами в обоих направлениях, возможно масштабирование с разным коэффициентом в центре и по края (как в режиме широкого увеличения ).
Практические ограничения
Терминология кино
В американских кинотеатрах обычные коэффициенты проецирования составляют 1,85: 1 и 2,39: 1. В некоторых европейских странах 1. 6 : 1 в качестве широкого стандарта экрана. «Отношение Академии» в 1,375: 1 было использовано для всех фильмов кино в звуковой эпохе до 1953 года (с выходом Джорджа Стивенса Шейн в 1. 6 : 1). В то время телевидение с аналогичным соотношением сторон 1,3 : 1 стало воспринимаемой угрозой для киностудий. Голливуд ответил, создавая большое количество форматов широкоэкранных: CinemaScope (до 2. 6 : 1), Todd-AO (2,20: 1), и VistaVision (первоначально 1,50: 1, в настоящее время 1. 6 : 1 до 2,00: 1) и это лишь некоторые из них. «Плоское» соотношение сторон 1,85: 1 было введено в мае 1953 года и стало одним из наиболее распространенных стандартов кинопроекции в США и других странах.
Целью этих различных линз и соотношений сторон было захватить как можно большую часть кадра на как можно большую площадь пленки, чтобы полностью использовать используемую пленку. Некоторые соотношения сторон были выбраны для использования пленки меньшего размера, чтобы сэкономить на стоимости пленки, в то время как другие соотношения сторон были выбраны для использования пленки большего размера, чтобы получить более широкое изображение с более высоким разрешением. В любом случае изображение было сжато по горизонтали, чтобы соответствовать размеру кадра пленки и избежать неиспользуемых областей пленки.
Системы кинокамеры
Пленка Super 16 мм часто использовалась для телевизионного производства из-за ее более низкой стоимости, отсутствия необходимости в пространстве для звуковой дорожки на самом фильме (поскольку он не проецируется, а скорее переносится на видео) и соотношении сторон, аналогичном 16: 9 (исходное соотношение Super 16 мм составляет 15: 9). Его также можно раздувать до 35 мм для театральных выпусков и поэтому иногда используют для художественных фильмов.
Текущие стандарты видео
9:16 (вертикальное видео)
1: 1 (квадрат)
4: 3 стандарт
16:10 стандарт
16: 9 стандарт
1,85: 1
Соотношение сторон 2: 1 было впервые использовано в 1950-х годах для формата RKO Superscope.
2.35: 1 и 2.39: 1
Получение высоты, ширины и площади экрана
Отличия
Перестановка (решение для PAR) дает:
Например, изображение VGA с разрешением 640 × 480 имеет SAR 640/480 = 4: 3 и при отображении на дисплее 4: 3 (DAR = 4: 3) имеет квадратные пиксели, следовательно, PAR составляет 1: 1. Напротив, изображение PAL 720 × 576 D-1 имеет SAR 720/576 = 5: 4, но отображается на дисплее 4: 3 (DAR = 4: 3), поэтому по этой формуле оно будет иметь PAR из (4: 3) / (5: 4) = 16:15.
В аналоговых изображениях, таких как пленка, нет ни понятия пикселя, ни понятия SAR или PAR, а «соотношение сторон» однозначно относится к DAR. Фактические дисплеи обычно не имеют неквадратных пикселей, хотя цифровые датчики могут; они скорее математическая абстракция, используемая при передискретизации изображений для преобразования между разрешениями.
Предыдущее и используемое в настоящее время соотношение сторон
Релизы с соотношением сторон
Исходное соотношение сторон (OAR)
Модифицированное соотношение сторон (MAR)
Проблемы в кино и на телевидении
Еще фотография
Общие соотношения сторон в неподвижной фотографии включают:
Многие цифровые фотоаппараты предлагают пользователю возможность выбора нескольких соотношений сторон изображения. Некоторые достигают этого за счет использования многоаспектных датчиков (особенно Panasonic ), в то время как другие просто обрезают свой собственный формат изображения, чтобы результат соответствовал желаемому соотношению сторон изображения.
Распространен в фотографиях большого и среднего формата, и до сих пор широко используется для распечаток с цифровых камер размером 8 × 10 дюймов.
Следующие несколько форматов берут свое начало в классических размерах изображений для пленочной фотографии, как классической 35-мм пленочной камере, так и многоформатной пленочной камере Advanced Photo System ( APS ). Камера APS могла выбирать любой из трех форматов изображения: APS-H (режим «высокой четкости»), APS-C («классический» режим) и APS-P («панорамный» режим).
Для аналоговой проекции слайдов, проектора и экрана используется соотношение сторон 1: 1, одинаково хорошо поддерживающее горизонтальную и вертикальную ориентацию. Напротив, технология цифровой проекции обычно поддерживает вертикально ориентированные изображения только с небольшой долей разрешения пейзажно-ориентированных изображений. Например, при проецировании цифрового неподвижного изображения с соотношением сторон 3: 2 на проектор 16: 9 используется 84,3% доступного разрешения в горизонтальной ориентации и только 37,5% в вертикальной ориентации.