Что такое соотношение сторон? (16:9, 21:9, 4:3)
При покупке нового монитора для ПК или, возможно, экрана телевизора, вы наткнетесь на спецификацию под названием «Соотношение сторон».
По сути, это просто соотношение ширины и высоты дисплея. Чем выше первое число по сравнению с последним числом, тем шире экран по сравнению с высотой.
Большинство мониторов и телевизоров сегодня имеют соотношение сторон 16:9 (широкоэкранный), и мы видим, что все больше и больше игровых мониторов получают соотношение сторон 21:9, также называемое UltraWide. Есть также несколько мониторов с соотношением сторон 32:9 или «Super UltraWide».
Список популярных соотношений сторон и разрешений экрана
Вот список соотношений сторон и несколько связанных разрешений:
Какое соотношение сторон я должен использовать?
В большинстве случаев наилучшим соотношением сторон будет любое собственное разрешение экрана/соотношение сторон вашего дисплея. Однако это также зависит от типа контента, который вы смотрите, а также от ваших личных предпочтений.
Когда дело доходит до игр, сверхширокие мониторы с соотношением сторон 21:9 могут предложить огромные преимущества за счет более широкого поля зрения. Вот почему некоторые соревновательные игры ограничивают соотношение сторон до 16:9, что означает, что у вас будут черные полосы по бокам экрана.
В конце концов, вы должны использовать любое соотношение сторон, которое считаете подходящим. Некоторые предпочитают, например, иметь более широкое изображение при просмотре фильмов, а другие предпочитают полностью растянутую картинку.
В ожидании aspect-ratio: «хаки» для пропорциональных боксов
В ожидании широкой поддержки свойства aspect‑ratio предлагаю вам вспомнить несколько вариаций «хака», которые мы все еще можем использовать, чтобы достичь такого же поведения с обычными боксами.
padding-top/bottom в %
Соблюдения соотношения сторон без aspect-ratio можно было достичь задав боксу с нулевой высотой padding-top или padding‑bottom в %. Процентное соотношение рассчитывалось по формуле:
высота / ширину * 100%
1×1 aspect ratio = 1 / 1 * 100% = padding‑top: 100%
4×3 aspect ratio = 3 / 4 * 100% = padding‑top: 75%
16×9 aspect ratio = 9 / 16 * 100% = padding‑top: 56.25%
В некоторых случаях, проценты округляли до сотых:
3×2 aspect ratio = 2 / 3 * 100% = padding‑top: 66.67% (66.66666666666667%)
Видимо, людям не нравилось писать 16 значные значения свойства. Что приводит нас к
padding‑top/bottom + функция calc()
И красиво, и немного намекает на то, что происходит, людям не знакомым с хаком.
Так как высота бокса была равной нулю, чтобы разместить в нем что-то (заголовок, например) нам было нужно использовать абсолютное позиционирование. Из-за чего он не был защищен от переполнения контентом.
Так же, вы могли столкнутся с еще одной причиной по которой мы не могли использовать данный способ. Вот хороший пример:
Блок лендинга Loopstudio из frontendmentor.io
Все проекты этого блока это по сути article с заголовком внутри. Изображения заданы через background‑image. Проекты также должны быть кликабельны. Мы можем обернуть все содержимое article в ссылку (в данном случае это не будет проблемой). Однако если проектам захотят добавить описание — у нас будет проблема с доступностью. Скринридер прочитает все что вложено в ссылку — и заголовок и описание. Решение есть и заключается в том, чтобы положить ссылку в заголовок и растянуть её область клика через псевдоэлемент. Но для этого нам нужно чтобы заголовки не были абсолютно cпозиционированы. А значит нужен другой вариант пропорционального бокса.
padding-top/bottom для ::before
Следующий способ заключался в том, чтобы задать внутренний отступ в % уже для псевдо‑элемента со значением float: left; Вот так:
Для более широкой поддержки по сравнению с flow-root (т.е. для браузеров
до середины 2017 года), в качестве альтернативы, для контейнера вы могли использовать свойство column-count:
Вариант с flexbox
display: flex; изменит направление потока документа с обычного, на горизонтальное слева направо:
Помните, что последние две вариации все так же не позволяют вам добавлять внутренние отступы контейнеру. Если Вам нужны отступы — их придется добавлять дочерним боксам.
Что дальше? @supports not
Какой же способ использовать в работе? Мне кажется, мы можем начать использовать aspect‑ratio и подстраховаться директивой @supports с оператором not:
Данный способ является самым надежным.
Если кому‑то работающему с вашим CSS понадобится как-то спозиционировать заголовок — они смогут сделать это с помощью флексбокса и внешних отступов со значением auto.
float просто перестанет работать. Таким образом, они ничего не заденут по случайности.
А со временем, когда поддержка будет более распространена — мы просто удалим правило.
Все, что нужно знать о том, как изменить соотношение сторон видео
Если вы часто скачиваете кино из Интернета или загружаете собственные клипы на YouTube и другие сайты, вы наверняка сталкивались с искажением картинки в видеофайлах.
Возможно, вы были разочарованы сплющенным и растянутым изображением в фильме, который долго искали. Или были неприятно удивлены черной рамкой, которая появляется вокруг изображения после загрузки клипа на сайт. Причина таких проблем кроется в неправильном соотношении сторон кадра, установленном при сохранении видеофайла. Стоит исправить эту ошибку – и видео будет радовать глаз правильными пропорциями и отсутствием ненужных элементов вроде черного обрамления картинки.
Яснее не стало? Прочтите нашу статью, и вы не только узнаете, что такое соотношение сторон видео, но и научитесь выявлять и исправлять проблемы, связанные с неправильным значением этого параметра.
Что такое пропорции видео?
Видеоряд любого фильма или клипа состоит из большого числа одинаковых по размеру кадров, размер каждого из которых характеризуется двумя величинами: шириной (длиной кадра по горизонтали) и высотой (длиной кадра по вертикали). Так вот, пропорция ширины и высоты кадра – и есть соотношение сторон видео. Эта величина обозначается двумя цифрами, разделенными двоеточием (2:1, 4:3 и т. д.).
Вариантов соотношения сторон существует немало, однако на сегодня наиболее распространены два: 4:3 и 16:9 (см. рисунок). Поскольку соотношение сторон 16:9 наиболее близко к тому, как человек видит окружающее пространство, именно этот формат сегодня наиболее популярен. Определенную популярность также набирает соотношение сторон 21:9 – для мониторов с ультрашироким экраном.
Как узнать соотношение сторон видеоклипа?
Когда мы говорим о соотношении сторон видеоклипа, обычно мы имеем в виду характеристику DAR (Display Aspect Ratio) – соотношение сторон, с которым запись отображается на экране. DAR зависит от двух величин:
Pixel Aspect Ratio (PAR) – соотношение сторон пикселя. Поскольку в современном цифровом видео, как правило, используются только квадратные пиксели, для большинства «компьютерных» видеофайлов эта величина всегда будет равна 1:1.
Storage Aspect Ratio (SAR) – отношение количества пикселей по горизонтали к количеству пикселей по вертикали (эти цифры указаны в разрешении видеофайла).
Умножив PAR на SAR, мы получаем DAR – фактическое соотношение сторон видеоклипа.
Разберем на примере. Допустим, нам нужно узнать соотношение сторон видеоклипа в формате AVI с разрешением 640 × 480. Чтобы вычислить SAR, нам нужно разделить ширину видеофайла (640) на высоту (480) до простой дроби. Получаем 4/3. Поскольку, как мы уже выяснили, PAR нашего видео равно единице, соотношение 4:3 и будет являться соотношением сторон видеоклипа.
К слову, значения DAR и SAR совпадают не всегда. Например, в стандартах VCD и DVD видеозаписи кодируются с использованием неквадратных пикселей, соотношение сторон которых не равно 1:1. Чтобы разобраться, давайте посчитаем DAR для DVD-видео с распространенным разрешением 720 × 576. В этом случае SAR будет равно 5:4, а PAR, согласно стандарту, – 16:15. Перемножив эти значения, получим все то же соотношение сторон 4:3.
Нет времени считать вручную? Если у вас установлен Movavi Конвертер Видео, вам повезло – эта умная программа сделает все за вас! Просто загрузите свое видео в конвертер, кликните по нему правой кнопкой мыши, выберите пункт Свойства файла, и вы увидите нужные цифры.
Какие бывают стандартные разрешения и какие соотношения сторон для них используются?
Наиболее часто используемые разрешения и соотношения сторон для них приведены в следующей таблице.
Какое соотношение сторон рекомендуется для YouTube?
Тут все просто: на сайте популярного видеохостинга соотношение сторон составляет 16:9, в противном случае к видео добавляются черные полосы.
Как выявить проблемы неправильного соотношения сторон?
При проигрывании видео, сохраненного с неверным соотношением сторон, вы увидите в кадре один из следующих дефектов:
Искажение пропорций. Изображение выглядит вытянутым или, напротив, сплющенным.
Нежелательные черные полосы по вертикали или горизонтали либо черную рамку вокруг изображения на видео.
Иногда такие проблемы возникают из-за неправильных настроек дисплея проигрывающего устройства. Однако если все настройки верны, а изображение на экране вас по-прежнему не радует, нужно поменять соотношение сторон самого видеофайла – в Movavi Конвертере Видео это можно сделать легко и быстро. Достаточно поставить программу на компьютер и выполнить несколько простых шагов.
Как исправить пропорции видео при помощи Movavi Конвертера Видео?
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) мегапикселей
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 устанавливает контейнеру ожидаемое соотношение сторон и предотвращает сдвиг макета после загрузки мультимедиа:
