Новое свойство CSS aspect-ratio, поддерживаемое в Chromium, Safari Technology Preview и Firefox Nightly.

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

Jan 28, 2021

Available in: English, and 日本語

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

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

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

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

Вот некоторые примеры того, когда важно поддерживать соотношение сторон:

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

Object-fit #

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

Значения initial и fill корректируют изображение, чтобы оно заполняло пространство. В нашем примере это приводит к тому, что изображение становится сжатым и размытым из-за повторной калибровки пикселей. Далеко от идеала. object-fit: cover использует наименьшее измерение изображения для заполнения пространства и обрезает изображение, чтобы уместить его в блоке на основе этого измерения. Изображение масштабируется по нижней границе. object-fit: contain гарантирует, что изображение всегда будет видимым целиком, и, следовательно, является противоположностью cover, принимая в качестве значения верхнюю границу размера (в нашем примере выше это ширина) и масштабируя изображение так, что его внутреннее соотношение сторон сохраняется, при этом изображение вписывается в пространство. В случае object-fit: none изображение обрезается по центру (положение объекта по умолчанию), сохраняя первичный размер.

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

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

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

Использование padding-top для установки соотношения сторон 1:1 для изображений предварительного просмотра публикации в карусели. — Использование `padding-top` для установки соотношения сторон 1:1 для изображений предварительного просмотра публикации в карусели.

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

Широко распространенное на данный момент кроссбраузерное решение для поддержания соотношения сторон на основе ширины изображения известно как «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 */
}

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

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

Использование aspect-ratio для установки соотношения сторон 1:1 для изображений предварительного просмотра публикации в карусели. — Использование `aspect-ratio` для установки соотношения сторон 1:1 для изображений предварительного просмотра публикации в карусели.

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

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

Использование padding-top

```css .container { width: 100%; padding-top: 56,25%; } ``

Использование aspect-ratio

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

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

Это новое свойство также добавляет возможность устанавливать соотношение сторон в 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;
}

Изображения в сетке с их родительским элементом при разных соотношением сторон. См. демонстрацию на Codepen.

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

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

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

Применение aspect-ratio создает заполнитель для предотвращения этого смещения макета:

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

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

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

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

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

<!-- Разметка -->
<img src="image.jpg" alt="..." width="8" height="6">

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

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

Заключение #

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

Использованные фотографии Эми Шамблен и Лайонела Густава загружены через Unsplash.

Последнее обновление

Jan 28, 2021 — Улучшить статью

Return to all articles