Как настроить aspect ratio

CSS-свойство aspect-ratio

Соотношение сторон ( aspect-ratio ) обычно выражается двумя целыми числами с двоеточием: width:height или x:y. Наиболее распространенные соотношения сторон для фотографий — 4:3 и 3:2, а видео, как правило, имеют соотношение сторон 16:9 или 4:3.

Два изображения с одинаковым соотношением сторон. У одного размеры 634×951 пикселей, а у другого — 200×300 пикселей. У обоих соотношение сторон 2:3.

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

• iframe, ширина которого 100% от родительской ширины, а высота должна быть пропорциональна ширине.
• подготовка контейнеров для изображений, видео и встраиваемых материалов для предотвращения дёргания и перестройки макета, по мере их загрузки
• единообразное адаптивное пространство для интерактивной визуализации данных (графиков и т.п.) или SVG-анимации
• единообразное адаптивное пространство для многоэлементных компонентов, например — карточки или календарики с датами.
• единообразное адаптивное пространство для нескольких изображений разного размера (можно использовать вместе с object-fit )

Встраивание изображений

Определение соотношения сторон помогает устанавливать размеры медиа в адаптивном контексте. Один из инструментов в этом сегменте — css-свойство object-fit , которое позволяет указывать, как объект (например, изображение) внутри блока должен заполнить этот блок:

Значения initial и fill искажают изображение, чтобы заполнить пространство. Это приводит к тому, что изображение может оказаться становится сжатым и размытым. Не идеально.

object-fit: cover использует размер меньшей из сторон изображения, чтобы заполнить пространство, затем обрезает картинку, чтобы поместить ее в контейнер.

object-fit: contain гарантирует, что всё изображение всегда будет видимым. Это — противоположность cover , для вычисления здесь используется большая из сторон, а размеры изображения изменяются так, чтобы сохранить его внутреннее соотношение сторон и вписать его в отведенное пространство.

В случае object-fit: none изображение обрезается по центру (положение объекта по умолчанию) с естественным размером.

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

Если какие-то детали на картинке важны (например, при работе с плоской укладкой косметических товаров), обрезка важного контента может оказаться недопустимой. Таким образом, идеальным вариантом были бы адаптивные изображения разных размеров, которые соответствовали бы пространству пользовательского интерфейса без обрезки.

Старый прием: сохранение соотношения сторон с padding-top

Чтобы сделать их отзывчивыми, можно использовать соотношение сторон. Это позволяет установить определенный размер соотношения и использовать остальную часть носителя на отдельной оси (высоте или ширине).

До настоящего времени широко распространенно кроссбраузерное решение для поддержания соотношения сторон в зависимости от ширины изображения, известное, как «Padding-Top Hack». Для этого решения требуется родительский контейнер и абсолютно спозиционированный дочерний контейнер. Далее требуется рассчитать соотношение сторон в процентах, чтобы установить его как верхнюю часть поля ( padding-top ). Например:

• отношение сторон 1:1 = 1 / 1 = 1 = padding-top: 100%
• отношение сторон 4:3 = 3 / 4 = 0.75 = padding-top: 75%
• отношение сторон 3:2 = 2 / 3 = 0.66666 = padding-top: 66.67%
• отношение сторон 16:9 = 9 / 16 = 0.5625 = padding-top: 56.25%

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

R этому html-коду подойдёт следующий CSS:

Обеспечение соотношения сторон с помощью aspect-ratio

Вычисление значения padding-top не очень интуитивно понятно и требует применение позиционирования. С помощью нового css-свойства aspect-ratio отношение сторон такая же задача решается иначе.

Для html-разметки из примера выше следует заменить padding-top: 56.25% на aspect-ratio: 16 / 9 , т.е. указать реальное отношение width / height .

Использование aspect-ratio вместо padding-top намного понятнее и оставляет для свойства padding его обычное поведение.

Для свойства aspect-ratio можно установить для соотношения сторон значение auto , где «замененные элементы с внутренним соотношением сторон используют это соотношение сторон; в противном случае блок не имеет предпочтительного соотношения сторон». Если указать одновременно значения auto и , то предпочтение будет соотношению сторон, определяемому делением width на height , если только это не замещаемый элемент с внутренним соотношением сторон (в этом случае используется его собственное соотношение сторон).

Пример согласованности в сетке (grid)

Этот пример чётко работает с механизмами компоновки, такими как CSS Grid и Flexbox. Рассмотрим список с дочерними элементами, для которых требуется сохранить соотношение сторон 1:1, например сетку логотипов спонсоров:

Изображения в сетке внутри родительского элемента с разным соотношением сторон.

Пример предотвращения сдвига макета

Еще одна замечательная особенность css-свойства aspect-ratio — оно предоставляет возможность реализовать блоки-заглушки (placeholder) для предотвращения сдвига макета (CLS — Cumulative Layout Shift) и предоставления качественных веб-показателей. В первом примере демонстрируется загрузка ресурса из API и получается сдвиг макета, когда загрузка мультимедиа завершится. Проще говоря, текст и блоки страницы скачут и перемещаются, до тех пор, пока все ресурсы загружаются.

Видео о совокупном сдвиге макета, который происходит, когда для контейнера загружаемого ресурса не установлено соотношение сторон. Это видео записано с помощью эмуляции медленного соединения — сети 3G.

Применение css-свойства aspect-ratio устанавливает контейнеру ожидаемое соотношение сторон и предотвращает сдвиг макета после загрузки мультимедиа:

Видео c предустановленным для контейнера загружаемого ресурса aspect-ratio . Это видео записано с помощью эмуляции медленного соединения — сети 3G.

Пример использования атрибутов изображения для указания соотношения сторон

Альтернативный способ установить соотношение сторон изображению — использовать его атрибуты. Если заранее известны размеры изображения, можно установить их, c помощью атрибутов width и height .

Например, если известно, что размеры изображения составляют 800px на 600px, код разметки для него будет выглядеть так: . Тогда, если у отправленного изображения будет такое же соотношение сторон, даже не обязательно с точно такими же значениями в пикселях, можно использовать значения атрибутов изображения для установки соотношения в сочетании с css-свойствами width: 100% и height: auto , чтобы изображение занимало отведенное пространство. Все вместе это будет выглядеть так:

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

Завершение

С новым CSS-свойством aspect-ratio , которое уже работает в нескольких современных браузерах, поддержка правильных соотношений сторон в контейнерах мультимедиа и макета становится проще и понятнее.

Источник

В ожидании 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 просто перестанет работать. Таким образом, они ничего не заденут по случайности.

А со временем, когда поддержка будет более распространена — мы просто удалим правило.

Источник

Как настроить aspect ratio

Counter-Strike: Global Offensive

9,016	уникальных посетителей
33	добавили в избранное

There is a lot of confusion about aspect ratios and what advantages they may or may not have. This guide has been created to shed some light on some common misconceptions and hopefully help newer players find settings that are right for them.

Before we hop into the main portion of this guide let me stress that resolution and aspect ratio is all preference. Don’t let other people decide what aspect ratio or resolution you should use; tinker with an assortment of different settings until you find what is right for you.

That being said, everything in this guide is factual. The only thing in this guide that is opinion-based is what resolution and aspect ratio you should use. If you prefer a certain resolution over another, use it. But, do not claim it’s for any other reason than personal preference. No resolution has an advantage over the other.

I always recommend using your monitor’s native resolution.

This aspect ratio is the most common among gaming monitors and features resolutions such as 1280×720, 1920×1080, 2560×1440, 3840×2160, etc. It’s a more widescreen aspect ratio, but a higher FOV comes with that widescreen look. Chances are: the monitor you are reading this on is a 16:9 aspect ratio.

Most gamers outside the CS:GO community play their games on a 16:9 1080p panel, but what makes the CS:GO community so reluctant to use 16:9?

Here is an example of what 16:9 (1920×1080) looks like:

A lot of European CS:GO professionals use the 4:3 aspect ratio. Not because it is better, but because that is what they are most accustomed to. Most professional CS:GO players didn’t start on CS:GO or even CS:S, most were around during the 1.6 days, when 16:9 wasn’t around. So when you see a pro player using 4:3 don’t make the common assumption «If most pros are using 4:3, it must be the best aspect ratio.» That is simply not true.

4:3 does not have any real advantages over 16:9, in fact 16:9 is a superior aspect ratio due to the higher FOV. You’ll be able to see an enemy player walking by you on a 16:9 panel before you see them on a 4:3 panel.

Here is an example of what 4:3 (1024×768) looks like:

4:3 stretched is very common among the North American CS:GO scene. It is still the 4:3 aspect ratio, but it has been stretched to fit on a full 16:9 panel with no black bars. The stretching of the pixels horizontally makes everything appear wider, making them easier to see.

Don’t get confused and think that just because the models appear bigger on your screen, that they are actually bigger in-game. Stretching your resolution will not make targets any easier to hit; the hitboxes are still exactly the same, the pixel width of the targets is still exactly the same.

* A lot of people are very angry about what is said above. If you think that using stretched resolution makes targets easier to hit, YOU ARE WRONG. Just because the models are wider does not mean they are actually wider. They aren’t. Un-stretch your resolution and play with it. It is EXACTLY the same. If stretching your resolution actually made targets easier to hit, everybody would use stretched resolution. People would buy 21:9 monitors just to stretch 4:3 all the way across the panel so shooting at people would be like shooting at the broad side of a barn. *SEE CATEGORY BELOW FOR EXAMPLES*

There is also a side effect of stretching your aspect ratio, which makes your perception of the X and Y sensitivity axis’ different, however there is a workaround with the m_yaw command. Be aware that using that fix will make your sensitivity no longer 1:1, so make sure you revert it if you switch to a non-stretched res.

Here is an example of what 4:3 (1024×768) stretched looks like:

16:10 stretched is something I only recently discovered was a thing. It’s used by some professional CS:GO players, but not by many. 16:10 stretched is sort of a middle ground between 4:3 stretched and 16:9. It gives you wider models than 16:9, but not as wide as 4:3 stretched. It also gives a higher FOV than 4:3, but not as high as 16:9.

Here is an example of what 16:10 (1680×1050) stretched looks like:

Keep in mind that this is an analogy. There are not bullets in the game, but this should help you understand what i’m saying. If it helps, imagine the bullets are pixels.

Here is a persons head with a bullet next to it for reference.

Now let’s look at that same picture, but this time it is stretched.

The bullet is also stretched. Meaning you can still only hit the exact same amount of mass as you could on non-stretched.

Now let’s look at what people think happens when you stretch your resolution.

The model is stretched, but the bullet is not. That is the common misconception: When you stretch your resolution, it only stretches the models. This is false. When you stretch your resolution, it stretches everything, even the bullets you are shooting.

Therefore, aiming and shooting targets is not easier. The models are still the same pixel width. There is no extra real estate for you to aim at on your screen. It only appears that way. Just because the models are physically bigger on your screen, does not mean they actually are. Any sort of critical thinking and understanding of stretched resolution would make that obvious.

If you still don’t believe me. I encourage you to buy a 21:9 monitor and to stretch 4:3 across it. The models will be HUGE, so they will be very easy to hit, at least by that logic.

But, you’d know that would be a huge waste of money and a really stupid idea if you read what is stated above.

I will always recommend using your monitors native resolution for the crispest image possible. However, some people can’t use their monitor’s native resolution for a number of reasons.

Источник