Свойство CSS-пропорций

Свойство CSS, которое помогает поддерживать интервалы в адаптивных макетах.

Una Kravets

Соотношение сторон

Соотношение сторон чаще всего выражается двумя целыми числами и двоеточием в размерах: ширина:высота или x:y. Наиболее распространенные соотношения сторон для фотографии — 4:3 и 3:2, тогда как видео и более поздние потребительские камеры, как правило, имеют соотношение сторон 16:9.

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

Некоторые примеры того, когда сохранение соотношения сторон становится важным:

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

Объект подходит

Определение соотношения сторон помогает нам определить размер медиафайлов в адаптивном контексте. Еще одним инструментом в этом сегменте является свойство 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%

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

<div class="container">
  <img class="media" src="..." alt="...">
</div>

Затем мы могли бы написать следующий CSS:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

Сохранение соотношения сторон с помощью aspect-ratio

К сожалению, вычисление этих значений padding-top не очень интуитивно понятно и требует некоторых дополнительных затрат и позиционирования. Благодаря новому встроенному свойству CSS aspect-ratio язык для поддержки пропорций стал намного понятнее.

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

.container {
  width: 100%;
  padding-top: 56.25%;
}

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

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

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

Пример: согласованность в сетке

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

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

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

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

С другой стороны, использование aspect-ratio создает заполнитель, чтобы предотвратить сдвиг макета:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

Дополнительный совет: атрибуты изображения для соотношения сторон

Другой способ установить соотношение сторон изображения — через атрибуты изображения . Если вы заранее знаете размеры изображения, рекомендуется установить эти размеры как его width и height .

В нашем примере выше, зная размеры 800х600 пикселей, разметка изображения будет выглядеть так: <img src="image.jpg" alt="..." width="800" height="600"> . Если отправленное изображение имеет такое же соотношение сторон, но не обязательно те же точные значения пикселей, мы все равно можем использовать значения атрибутов изображения для установки соотношения в сочетании со стилем width: 100% чтобы изображение занимало необходимое пространство. Все вместе это будет выглядеть так:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
  height: auto;
}

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

Заключение

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

Фотографии Эми Шамблен и Лайонела Гюстава через Unsplash.