02.08.2021

Давайте узнаем о соотношении сторон в CSS

Давайте узнаем о соотношении сторон в CSS

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

Введение: Что такое соотношение сторон?

Согласно Википедии: В арифметике соотношение указывает, сколько раз одно число содержит другое. К примеру, если в миске с фруктами находится восемь апельсинов и 6 лимонов, то соотношение апельсинов и лимонов будет восемь к 6 (то есть 8∶6, что эквивалентно соотношению 4∶3).

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

Давайте узнаем о соотношении сторон в CSS

У нас соотношение 4: 3. Это указывает, что соотношение яблока и винограда составляет четыре к трем. Другими словами, самый небольшой прямоугольник, который мы можем создать для соотношения сторон 4: 3, — это прямоугольник 4 * 3 пикселя. Когда высота этого блока меняется пропорционально его ширине, у нас будет блок, который соблюдает соотношение сторон. Разглядим следующий рисунок.

Давайте узнаем о соотношении сторон в CSS

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

Давайте узнаем о соотношении сторон в CSS

Обратите внимание, что детали изображения сохраняются независимо от размера. Имея неизменное соотношение сторон, мы можем получить последующие преимущества:

Изображения на сайте будут одинаковыми для разных размеров области просмотра.

Принципиальные детали сохранены.

У нас тоже имеют возможность быть отзывчивые видеоэлементы.

Это помогает дизайнерам создавать точное руководство по размеру изображений, чтобы разработчики могли обрабатывать их в процессе разработки.

Измерение соотношения сторон

Чтоб измерить соотношение сторон, нам нужно поделить ширину на высоту, как показано на последующем рисунке.

Давайте узнаем о соотношении сторон в CSS

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

Давайте узнаем о соотношении сторон в CSS

Обратите внимание на изображение справа, значение ширины ÷ высоты составляет 1,02 , что не соответствует начальному соотношению сторон (1,33 или 4: 3).

Вы сможете спросить, как придерживатся значения 4: 3 ? Это именуется ближайшим нормальным соотношением сторон, и есть инструменты, которые имеют возможность помочь нам в его поиске. При работе над дизайном пользовательского интерфейса безотступно рекомендуется точно знать, какое соотношение сторон изображений вы используете. Внедрение специального калькулятора может помочь в этом.

Я надеюсь, что концепция соотношения сторон сейчас вам понятна. Если вы уже знали об этом, то я надеюсь, что вы просто обновили свои познания.

Реализация соотношения сторон в CSS

Мы привыкли реализовывать соотношение сторон, используя процентное наполнение в CSS. Хорошей новостью является то, что не так давно мы получили встроенную поддержку aspect-ratio во всех главных браузерах. Прежде чем погрузиться в новый метод, я сначала объясню старый, добрый и испытанный способ.

Когда элемент имеет вертикальное процентное наполнение, оно будет основано на ширине его родительского элемента. Разглядим следующий рисунок:

Давайте узнаем о соотношении сторон в CSS

Когда заголовок имеет padding-top:50%, значение рассчитывается на основе его родительской ширины. Так как ширина родителя 200px, то padding-top будет 100px.

Чтоб узнать, какое процентное значение использовать, нам необходимо разделить высоту изображения на его ширину. Приобретенное число — это процент, который вы желаете использовать.

Учтите, что ширина изображения составляет 260 пикселей, а высота — 195 пикселей. Percentage padding = height / width

Итог 195/260 составляет 0,75 (либо 75%).

Предположим, что есть сетка карточек, и у каждой из их есть миниатюра. Миниатюры должны быть равными по ширине и высоте.

Давайте узнаем о соотношении сторон в CSS

По некий причине автор контента загрузил изображение, размер которого не соответствует другим. Обратите внимание на то, что высота средней карты не такая же, как у других.

Вы сможете подумать, ну, мы можем добавить фиксированную высоту и object-fit: cover. Неувязка решена, правда? Это не так просто. Это решение не будет отлично смотреться при изменении размеров области просмотра.

Давайте узнаем о соотношении сторон в CSS

Обратите внимание, что в средней миниатюре с фиксированной высотой, очень обрезаны края слева и справа, в то время как на мобильных устройствах они очень широкие. Все это за счет использования фиксированной высоты. Мы можем настроить высоту вручную с помощью разных медиа-запросов, но это не практическое решение.

Нам нужен неизменный размер миниатюр вне зависимости от размера области просмотра. Для этого нам необходимо реализовать соотношение сторон, используя процентное наполнение.

CSS

С учетом вышеизложенного мы обусловили, что высота оболочки эскиза карточки ( .card__thumb) зависит от ее ширины. Не считая того, изображение абсолютно позиционировано и имеет полную ширину и высоту собственного родительского элемента. Смотрите видео ниже:

Обратите внимание, как поменялся размер карточки, но не изменилось соотношение сторон миниатюр.

Представляем свойство aspect-ratiо

Ранее, была включена помощь свойства CSS aspect-ratio в Chrome, Safari TP и Firefox Nightly. Не так давно оно получило поддержку и в официальной версии Safari 15.

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

CSS

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

Вы также сможете поиграть с интерактивной демонстрацией.

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

Прогрессивное улучшение

Сейчас мы можем использовать CSS aspect-ratio, используя @supports и переменные CSS.

CSS

Сценарии использования

Более распространенный вариант использования aspect-ratio — изображение карты. Так как я уже рассказал об этом, я не буду вдаваться в подробности.

Изображения логотипов

В прошедшем году я опубликовал статью о том, как верно согласовать логотипы разного размера с помощью CSS object-fit и позиционирования. Сейчас это еще проще aspect-ratio. Давайте взглянем на последующие логотипы.

Давайте узнаем о соотношении сторон в CSS

Вы увидели, что их размеры совпадают, и они выровнены? Давайте заглянем за кулисы.

CSS

Я добавил базисную ширину, 130px чтобы получить минимальный размер, а aspect-ratio позаботится об их высоте.

Давайте узнаем о соотношении сторон в CSS

Голубая область — это размер изображения, и принципиально установить object-fit:contain, чтобы не искажать изображения.

Адаптивные круги

Вам когда-нибудь необходимо было создать отзывчивый круговой элемент? CSS aspect-ratio совершенно подходит для этого.

Давайте узнаем о соотношении сторон в CSS

CSS

Если два значения для соотношения сторон схожи, мы можем написать aspect-ratio:1 заместо aspect-ratio: 1/1. Если вы используете CSS-сетку flexbox, ширина будет необязательной, и ее можно добавить в качестве малого значения.

Внешние Ссылки

Это вариант использования, с которым я не так давно столкнулся в клиентском проекте. У меня есть компонент наружной ссылки. Я сделал его с отступом, который необходимо изменить на мобильном устройстве, но не на настольном.

Давайте узнаем о соотношении сторон в CSS

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

Спасибо за чтение…

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *