Код ниже стилизует блок так, что его высота будет равна его ширине:
.container width: 200px; aspect-ratio: 1 / 1;> .container width: 200px; aspect-ratio: 1 / 1; > Скопировать Скопировано Не удалось скопировать
Подобное поведение можно получить и в случае, когда задана только высота:
.container height: 200px; aspect-ratio: 1 / 1;> .container height: 200px; aspect-ratio: 1 / 1; > Скопировать Скопировано Не удалось скопировать
Как пишется
- auto — соотношение сторон считается автоматически.
- / — соотношение сторон всегда считается относительно ширины и высоты блока.
- auto / — совмещённая запись.
При совмещённой записи соотношение / приоритетнее, но когда у элемента есть собственное соотношение сторон, применится оно:
Чтобы избежать искажений картинки, можно использовать свойство object — fit .
Как понять
Свойство вычисляет незаданную сторону, исходя из размера уже известной. Возьмём пример с aspect — ratio : 2 / 1 :
How to Fix Skyrim Special Edition Full Screen
.container width: 200px; aspect-ratio: 2 / 1;> .container width: 200px; aspect-ratio: 2 / 1; > Скопировать Скопировано Не удалось скопировать
Соотношение сторон в этом случае — 2 / 1 . Такому соотношению должны равняться и стороны блока: / .
Нам известна ширина — 200px .
Отсюда получаем высоту блока — 100px .
Подсказки
Свойство нельзя применить к строчным элементам.
Хотя большинство значений поддерживается основными браузерами, с некоторыми могут быть трудности. Поэтому на всякий случай проверяйте поддержку на Can I use.
Источник: doka.guide
Давайте рассмотрим соотношение сторон в CSS
Важно иметь постоянное соотношение ширины и высоты изображений и других отзывчивых элементов. Мы много лет использовали в CSS хак с отступами, но сейчас у нас есть встроенная поддержка соотношения сторон в CSS. В этой статье я расскажу, что такое соотношение сторон, как мы его использовали и как это делать по-новому. Конечно, будут варианты использования с подходящими запасными вариантами.
Введение: Что такое соотношение сторон?
Соотношение в математике (отношение, пропорция) — это взаимосвязь между двумя однородными числовыми величинами. Обычно выражается как «a к b» или a:b. Иногда представляется арифметически как результат (не обязательно целочисленный) деления двух числовых значений, непосредственно отображающий, сколько раз первое число содержит второе.
В веб-дизайне понятие соотношения сторон используется для описания того, что ширина и высота изображения должны изменятся пропорционально друг другу.
У нас соотношение 4:3. Мы можем увидеть это по соотношению яблок к винограду — оно равно четыре к трём.
Простая и правильная работа с DynDOLOD Skyrim Special Edition и Anniversary Edition гайд и настройка
Другими словами, самый маленький прямоугольник, который мы можем создать для соотношения сторон 4:3, это прямоугольник 4 * 3 пикселя. Когда высота этого блока изменяется пропорционально его ширине, у нас будет блок соответствующим ему соотношению сторон.
Рассмотрим следующий рисунок.
Размер поля изменяется пропорционально, и соотношение между его шириной и высотой остаётся неизменным. А теперь представим, что прямоугольник содержит важное изображение, и мы заботимся обо всех его деталях.
Обратите внимание, что детали размера сохраняются независимо от размера. Имея постоянное соотношение сторон, мы можем получить следующие преимущества:
- Изображения на веб-сайте будут одинаковыми для разных размеров экрана.
- Важные детали сохранены.
- У нас так же могут быть отзывчивые видео элементы.
- Это помогает дизайнерам создавать чёткое руководство по размеру изображений, чтобы разработчики могли обрабатывать их в процессе разработки.
Измерение соотношения сторон
Чтобы измерить соотношение сторон, нам нужно разделить ширину на высоту, как показано на следующем рисунке.
Соотношение ширины и высоты: 1,33. Значит это соотношение следует соблюдать. Учтите следующее:
Обратите внимание на изображение справа, отношение ширины к высоте равно 1.02, что не соответствует исходному соотношению сторон (1.33 или 4:3).
Вы можете подумать, как привести его к 4:3? Ну, это называется Ближайшим Нормальным Соотношением Сторон, и есть инструменты, которые могут помочь нам в его поиске. При работе над дизайном пользовательского интерфейса настоятельно рекомендуется знать точное соотношение сторон изображений, которые вы будете использовать. Калькулятор может в этом помочь.
С этим, я надеюсь, что концепция соотношения сторон вам понятна. Если вы уже знаете об этом, то обновить свои знания тоже неплохо.
Реализация aspect-ratio в CSS
Мы привыкли реализовывать соотношение сторон, через внутренние отступы в CSS. Хорошая новость в том, что недавно мы получили встроенную поддержку соотношения сторон aspect-ratio — во всех браузерах. Прежде чем прейти к новому способу, я немного расскажу про старый добрый способ решения проблемы с помощью padding .
Когда заголовок имеет padding: 50% , значение вычисляется на основе ширины его родительского элемента. Поскольку ширина родительского элемента составляет 200px , padding-top станет равен 100px .
Что бы узнать, какое процентное значение использовать, нам нужно разделить высоту изображения на его ширину. Полученное число — это процент, который вам нужен.
Учтите, что ширина изображения составляет 260px , высота — 195px .
Проценты внутреннего отступа = высота / ширина
Результат 195/260 — 0.75 (или 75%).
Предположим, что есть сетка из карточек, и у каждой из них есть миниатюра. Миниатюры должны быть равными по ширине и высоте.
По какой-то причине автор контента загрузил изображение, размер которого не соответствует другим. Обратите, как высота средней карточки не равна высоте других.
Вы могли бы подумать, что мы можем добавить фиксированную высоту и object-fit: cover Проблема решена, правда? Это не так просто. Это решение будет плохо смотреться при разных размерах экрана.
Обратите внимание, что изображения среднего ряда с фиксированной высотой слишком сильно обрезаны слева и справа, а на мобильных устройствах они слишком широкие. Это происходит из-за фиксированной высоты. Мы можем вручную настроить высоту с помощью различных медиа запросов, но это непрактичное решение.
Нам нужен постоянный размер миниатюр вне зависимости от размера экрана. Для этого нужно реализовать соотношение сторон, используя процентное заполнение padding .
article class=»card»>
div class=»card__thumb»>
img data-src=»thumb.jpg» alt=»» />
div>
div class=»card__content»>
h3>Muffins Recipeh3>
p>Servings: 3p>
div>
article>
.card__thumb
position: relative;
padding-top: 75%;
>
.card__thumb img
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
>
С учётом вышеизложенного мы определили, что высота обёртки миниатюры карточки ( .card__thumb ) зависит от её ширины. Кроме того, изображение абсолютно позиционировано и имеет полную высоту и ширину своего родителя, с object-fit: cover для случаев с загрузкой изображения другого размера. Теперь размер карточки может меняться без изменения соотношения сторон.
Представляем CSS свойство aspect-ratio
Ранее в этом году CSS свойство aspect-ratio было поддержано в Chrome, Safari TP и Firefox Nightly. Недавно оно получило поддержку в официальной версии Safari 15.
Сейчас aspect-ratio поддерживается всеми современными браузерами, кроме Internet Explorer.
Что полезно в этом свойстве, так это то, что нам не нужно добавлять процентное заполнение внутреннего отступа. Мы можем просто задать нужное нам соотношение сторон.
Если мы вернёмся к предыдущему примеру, то мы можем переписать его так:
/* Текущий способ */
.card__thumb
position: relative;
padding-top: 75%;
>
/* С поддержкой aspect-ratio */
.card__thumb
position: relative;
aspect-ratio: 4/3;
>
Посмотрите на интерактивном примере, как процентное соотношение меняется.
Итак, давайте рассмотрим некоторые варианты использования, в которых поддержка браузерами соотношения сторон может быть полезно, и как использовать его в прогрессивно улучшенном подходе.
Прогрессивное улучшение
Варианты использования
Наиболее распространённый вариант использования aspect-ratio — карточки с изображениями. Поскольку я уже рассказал об этом, то не буду вдаваться в подробности.
Изображения логотипов
В прошлом году я опубликовал статью о том, как правильно выровнять логотипы разного размера с помощью CSS свойства object-fit и позиционирования. Теперь с CSS свойством aspect-ratio это стало ещё проще.
Давайте посмотрим на эти логотипы.
Вы заметили, что у них одинаковый размер и они выровнены? Давайте заглянем в код:
li class=»brands__item»>
a href=»#»>
img data-src=»assets/batch-2/aanaab.png» alt=»» />
a>
li>
.brands__item a
padding: 1rem;
>
.brands__item img
width: 130px;
object-fit: contain;
aspect-ratio: 2/1;
>
Я добавил базовую ширину 130px что бы получить минимальный размер, а aspect-ratio позаботится о высоте.
Синяя область — это размер изображения, и важно использовать object-fit , что бы избежать искажения изображения.
Отзывчивые круги
Да! Вам когда-нибудь нужно было создать округлый элемент, который должен быть отзывчивым? CSS свойство aspect-ratio идеально подходит для этого.
.person
width: 180px;
aspect-ratio: 1;
>
Если оба значения для которых высчитывается соотношение сторон равны, мы можем записать aspect-ratio: 1 , вместо aspect-ratio: 1/1 . Если вы используете Grid или Flexbox, ширина будет не обязательной, и её можно добавить в качестве минимального значения.
Внешние ссылки
Это вариант использования с которым я недавно столкнулся в клиентском проекте. У меня есть компонент с внешними ссылками. Сначала я сделал их с внутренним отступом, который нужно изменять на мобильном устройстве.
С aspect-ratio мы можем заставить его реагировать на ширину родительского элемента без необходимости настраивания внутреннего отступа на мобильных устройствах (т.е. уменьшать его)
Источник: www.dev-notes.ru
CSS-свойство aspect-ratio
Соотношение сторон ( aspect-ratio ) обычно выражается двумя целыми числами с двоеточием: width:height или x:y. Наиболее распространенные соотношения сторон для фотографий — 4:3 и 3:2, а видео, как правило, имеют соотношение сторон 16:9 или 4:3.
С появлением адаптивного дизайна поддержка соотношения сторон стала важной его составляющей: размеры изображений различаются, а размеры элементов меняются в зависимости от доступного пространства. Вот несколько случаев, когда важно поддерживать соотношение сторон:
- iframe, ширина которого 100% от родительской ширины, а высота должна быть пропорциональна ширине.
- подготовка контейнеров для изображений, видео и встраиваемых материалов для предотвращения дёргания и перестройки макета, по мере их загрузки
- единообразное адаптивное пространство для интерактивной визуализации данных (графиков и т.п.) или SVG-анимации
- единообразное адаптивное пространство для многоэлементных компонентов, например — карточки или календарики с датами.
- единообразное адаптивное пространство для нескольких изображений разного размера (можно использовать вместе с object-fit )
Встраивание изображений
Определение соотношения сторон помогает устанавливать размеры медиа в адаптивном контексте. Один из инструментов в этом сегменте — css-свойство object-fit , которое позволяет указывать, как объект (например, изображение) внутри блока должен заполнить этот блок:
Значения initial и fill искажают изображение, чтобы заполнить пространство. Это приводит к тому, что изображение может оказаться становится сжатым и размытым. Не идеально.
object-fit: cover использует размер меньшей из сторон изображения, чтобы заполнить пространство, затем обрезает картинку, чтобы поместить ее в контейнер.
object-fit: contain гарантирует, что всё изображение всегда будет видимым. Это — противоположность cover , для вычисления здесь используется большая из сторон, а размеры изображения изменяются так, чтобы сохранить его внутреннее соотношение сторон и вписать его в отведенное пространство.
В случае object-fit: none изображение обрезается по центру (положение объекта по умолчанию) с естественным размером.
object-fit: cover часто используется для обеспечения хорошего единообразного интерфейса при работе с изображениями разных размеров, однако при этом может теряться часть информации (изображение обрезается по самым длинным краям).
Если какие-то детали на картинке важны (например, при работе с плоской укладкой косметических товаров), обрезка важного контента может оказаться недопустимой. Таким образом, идеальным вариантом были бы адаптивные изображения разных размеров, которые соответстWowали бы пространству пользовательского интерфейса без обрезки.
Старый прием: сохранение соотношения сторон с 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:
.container < position: relative; width: 100%; padding-top: 56.25%; /* отношение 16:9 */ >.media
Обеспечение соотношения сторон с помощью aspect-ratio
Вычисление значения padding-top не очень интуитивно понятно и требует применение позиционирования. С помощью нового css-свойства aspect-ratio отношение сторон такая же задача решается иначе.
Для html-разметки из примера выше следует заменить padding-top: 56.25% на aspect-ratio: 16 / 9 , т.е. указать реальное отношение width / height .
.container < position: relative; width: 100%; padding-top: 56.25%; /* отношение 16:9 */ aspect-ratio: 16 / 9; /* отношение 16:9 */ > .media
Использование aspect-ratio вместо padding-top намного понятнее и оставляет для свойства padding его обычное поведение.
Для свойства aspect-ratio можно установить для соотношения сторон значение auto , где «замененные элементы с внутренним соотношением сторон используют это соотношение сторон; в противном случае блок не имеет предпочтительного соотношения сторон». Если указать одновременно значения auto и , то предпочтение будет соотношению сторон, определяемому делением width на height , если только это не замещаемый элемент с внутренним соотношением сторон (в этом случае используется его собственное соотношение сторон).
Пример согласованности в сетке (grid)
Этот пример чётко работает с механизмами компоновки, такими как CSS Grid и Flexbox. Рассмотрим список с дочерними элементами, для которых требуется сохранить соотношение сторон 1:1, например сетку логотипов спонсоров:
.sponsor-grid < display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); >.sponsor img < aspect-ratio: 1 / 1; width: 100%; object-fit: contain; >
Изображения в сетке внутри родительского элемента с разным соотношением сторон.
Пример предотвращения сдвига макета
Еще одна замечательная особенность 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 */ img
В этом случае, эффект будет таким же, как при установке соотношения сторон изображения с помощью CSS aspect-ratio , и получится избежать кумулятивного сдвига макета.
Завершение
С новым CSS-свойством aspect-ratio , которое уже работает в нескольких современных браузерах, поддержка правильных соотношений сторон в контейнерах мультимедиа и макета становится проще и понятнее.
Источник: xhtml.ru