Подробное рассмотрение object-fit и background-size в CSS

Подробное рассмотрение object-fit и background-size в CSS

От автора: в этой статье мы рассмотрим, как работают object-fit и background-size, когда мы можем их использовать и почему, а также некоторые практические примеры использования и рекомендации.

Мы не всегда можем загрузить изображения разного размера в элемент HTML. Если мы используем ширину и высоту, которые не пропорциональны соотношению сторон изображения, изображение может быть сжато или растянуто. Это плохо, и это можно решить либо с помощью object-fit элемента img, либо с помощью background-size.

Во-первых, давайте определимся с проблемой. Рассмотрим следующий рисунок:

Подробное рассмотрение object-fit и background-size в CSS

Фото сжимается в компоненте карты

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Почему это происходит?

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

Мы видим это на следующем рисунке:

Подробное рассмотрение object-fit и background-size в CSS

Соотношение сторон изображения отличается от содержащего его поля, и изображение растягивается

Решение

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

Подробное рассмотрение object-fit и background-size в CSS

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

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

Свойство CSS object-fit

Свойство object-fit определяет, как содержание элемента (такое как img или video) должно быть изменено, чтобы соответствовать размеру его контейнера. Значение по умолчанию для object-fit равно fill, что может привести к сжатию или растягиванию изображения.

Давайте рассмотрим возможные значения для object-fit.

object-fit: contain

В этом случае размер изображения будет изменен в соответствии с соотношением сторон его контейнера.

Подробное рассмотрение object-fit и background-size в CSS

object-fit: cover

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

Подробное рассмотрение object-fit и background-size в CSS

При использовании object-fit: cover изображение будет либо обрезано по размеру контейнера, либо, соответствующим образом, изменен его размер

object-fit: fill

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

Подробное рассмотрение object-fit и background-size в CSS

При использовании object-fit: fill изображение будет соответственно сжато, растянуто или изменено в размере

object-fit: none

В этом случае изображение вообще не будет изменено, ни растянуто, ни сжато. Оbject-fit:none работает как значение cover, но не соблюдает соотношение сторон своего контейнера.

Подробное рассмотрение object-fit и background-size в CSS

При использовании object-fit:none изображение не будет изменено, если его размеры не совпадают

Помимо object-fit, у нас также есть свойство object-position, которое отвечает за размещение изображения в его контейнере.

Возможные значения для object-position

Свойство object-position работает аналогично CSS свойству background-position.

Подробное рассмотрение object-fit и background-size в CSS

В большинстве случаев используется значение по умолчанию (например, «center» или «50% 50%»)

Ключевые слова top и bottom также работают, когда превышается вертикальное соотношение сторон содержащего контейнера.

Подробное рассмотрение object-fit и background-size в CSS

Сравнение object-position: top(слева) и object-position:bottom(справа)

CSS background-size

Первое отличие background-size заключается в том, что мы имеем дело с фоном, а не с элементом img как в HTML.

Возможные занчения background-size

Возможными значениями background-size являются auto, contain и cover.

background-size: auto

С auto, изображение сохранит размер по умолчанию.

Подробное рассмотрение object-fit и background-size в CSS

Имейте в виду, что размер по умолчанию может иногда приводить к размытому изображению (если оно слишком маленькое)

background-size: cover

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

Подробное рассмотрение object-fit и background-size в CSS

При использовании background-size:cover обязательно учитывайте соотношение сторон изображения

background-size:contain

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

Подробное рассмотрение object-fit и background-size в CSS

background-size: contain изменяет размер изображения в соответствии с размером контейнера

Что касается background-position, то оно похоже на работу object-position. Единственное отличие состоит в том, что позиция по умолчанию для них разная.

Когда не нужно использовать object-fit или background-size

Если элемент или изображение имеет фиксированную высоту и имеет либо background-size:cover либо object-fit:cover, возможен результат, в котором изображение будет слишком широким, таким образом, теряя важные детали, которые могут повлиять на восприятие пользователем.

Рассмотрим следующий пример, в котором изображению присвоена фиксированная высота:

Подробное рассмотрение object-fit и background-size в CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Изображение справа слишком широкое, потому что оно имеет фиксированную высоту, а контейнер карты слишком широк

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

Второе — использовать CSS свойство aspect-ratio. Мы можем сделать следующее:

Случаи использования и примеры

Аватарки пользователей

Идеальный вариант использования object-fit:cover — аватарки пользователей. Соотношение сторон, разрешенное для аватарки, часто бывает квадратным. Размещение изображения в квадратном контейнере может исказить изображение.

Подробное рассмотрение object-fit и background-size в CSS

Сравнение аватарок пользователя без object-fit и с object-fit:cover

Список логотипов

Мы часто используем логотипы для перечисления клиентов. Поскольку логотипы имеют разные размеры, нам нужен способ изменить их, не искажая. К счастью, хорошее решение для этого object-fit:contain.

Подробное рассмотрение object-fit и background-size в CSS

Использование object-fit: contain может помочь нам изменить размер логотипов клиентов, не искажая их

Миниатюры статей

Это очень распространенный вариант использования. Контейнер для миниатюры статьи не всегда может содержать изображение с одинаковым соотношением сторон. Эта проблема должна быть исправлена в первую очередь системой управления контентом (CMS), но не всегда такое возможно.

Подробное рассмотрение object-fit и background-size в CSS

Корректировка миниатюр статей с помощью из object-fit:cover

HERO-фон

В этом случае решение о том, использовать ли элемент img или фон CSS, будет зависеть от следующего:

Изображение важно? Если по какой-то причине CSS отключен, хотим ли мы, чтобы пользователь видел изображение?

Или цель изображения чисто декоративная?

Основываясь на ответе, мы можем решить, какую функцию использовать. Если изображение важно:

Подробное рассмотрение object-fit и background-size в CSS

Предположим, изображение важно, потому что это веб-сайт, посвященный еде

Если изображение декоративное, мы можем использовать background-image:

В этом случае CSS короче.

Добавление фона к изображению с помощью object-fit:contain

Знаете ли вы, что можете добавить цвет фона для элемента img? Мы можем сделать этого с использованием object-fit:contain.

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

Подробное рассмотрение object-fit и background-size в CSS

Мы можем использовать object-fit: contain для добавления цвета фона к изображению

Видеоэлемент

Вам когда-нибудь был нужен элемент video в качестве фона? Если это так, то вы, вероятно, хотели бы, чтобы он занимал всю ширину и высоту своего родителя.

Подробное рассмотрение object-fit и background-size в CSS

Значение по умолчанию для object-fit равно contain. Как вы можете видеть, видео не покрывает hero-фон, даже если у него установлены position:absolute, width: 100% и height: 100%

Чтобы элемент video полностью покрыл ширину и высоту своего родителя, нам нужно переопределить значение по умолчанию для object-fit:

Подробное рассмотрение object-fit и background-size в CSS

Теперь видео покрывает всю ширину и высоту своего родителя

Заключение

Как видите, и object-fit и background-size очень полезны для обработки различных соотношений сторон изображения. У нас не всегда будет контроль над установкой идеальных размеров для каждого изображения, и именно в этом проявляются эти две функции CSS.

Дружественный совет для выбора между элементом img и фоном CSS: если изображение чисто декоративное, выберите фон CSS. В противном случае более подходит img. Надеюсь, вы нашли эту статью полезной. Спасибо за чтение.

Автор: Ahmad Shadeed

Источник: www.smashingmagazine.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка-Мастер. Полное руководство

Овладейте современной адаптивной версткой с нуля

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментирование закрыто.