Перевод статьи Flexible CSS cover images с сайта nicolasgallagher.com, c разрешения автора — Николаса Галахера.

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

• Демо: Адаптирующиеся картинки-заставки на CSS

Поддержка браузерами: Chrome, Firefox, Safari, Opera, IE 9+

Функции

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

Элемент картинки-заставки должен уметь:

• отображать фиксированное соотношение сторон, до тех пор, пока их конкретные максимальные размеры превышены;
• поддерживать различные пропорции;
• поддерживать свойства max-height и max-width;
• поддерживать разные фоновые картинки;
• отобразить изображение так, чтобы оно либо полностью заполняло компонент, либо целиком помещалось в нем;
• центрировать изображение;

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

Соотношение сторон пустого, блочного элемента может управляться с помощью установки в процентное значение его свойств padding-bottom или padding-top. Данное объявление (без какого-либо явного height), преобразует высоту элемента в 50% от его ширины.

.CoverImage {
  padding-bottom: 50%;
}

Изменения значения такого padding’a изменит и соотношение сторон. Например, результатом padding-а в 25% будет пропорция 4:1, padding в 33.333% в 3:1 соответственно, и т.д.

Максимальные размеры

Проблема с использованием этого трюка/хака для пропорций состоит в том, что если у элемента объявлено max-height, оно не будет учитываться. Это можно обойти с помощью другого «хака». Вместо того, чтобы выставлять padding элементу, мы можем создать псевдоэлемент и назначить padding уже ему.

.CoverImage:before {
  content: "";
  display: block;
  padding-bottom: 50%;
}

Теперь max-height у главного элемента будет работать. Следовало бы так же обрезать и переполнение псевдоэлемента.

.CoverImage {
  display: block;
  max-height: 300px;
  max-width: 1000px;
  overflow: hidden;
}

.CoverImage:before {
  content: "";
  display: block;
  padding-bottom: 50%;
}

Этот прием для соотношения сторон используется компонентом FlexEmbed в препроцессоре SUITCSS. Этот компонент предназначен прежде всего для отзывчивых встраиваемых видео, но он достаточно гибок, чтобы быть полезным всякий раз, когда вам необходим отображаемый элемент с предопределённым соотношением сторон. Этот компонент предоставляет модификаторы для пропорций 2:1, 3:1, 16:9, и 4:3. Компонент картинок-обложек может расширить компонент FlexEmbed.

<div class="CoverImage FlexEmbed FlexEmbed--2by1"></div>

Фоновое изображение

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

.CoverImage {
  ...
  background-repeat: no-repeat;
  background-size: cover;
}

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

<div class="..." style="background-image: url(cover.jpg)"></div>

Изображения могут быть полностью отцентрированы с помощью позиции фона и центрирования блока. Эта гарантирует, что изображение будет отцентрировано в элементе, и что сам элемент будет так же отцентрирован внутри своего родителя (когда он достигнет значения max-width).

.CoverImage {
  ...
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
}

Финальный результат

Если вы полагались на модуль FlexEmbed, то вам потребовалось совсем немного кода. (Посмотрите демо-пример со всем кодом, включающим код от FlexEmbed)

/**
 * требуется: suitcss/встроенная гибкость
 */

.CoverImage {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
  max-height: 300px;
  max-width: 1000px;
}

<div class="CoverImage FlexEmbed FlexEmbed--3by1"
     style="background-image:url(cover.jpg)"<
</div>

Вы можете добавить дополнительные настройки, такие как добавление фонового цвета, или возможность переключения между ключевыми словами cover и contain для background-size.

P.S. Это тоже может быть интересно:

• CSS-выражения от контейнера для дизайнеров
• День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari
• Новогодние подарки Рабочей группы CSS: значения и единицы 4 уровня, медиавыражения 4 и 5 уровней