19.01.2022

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

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

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

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

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

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

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

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

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

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

Подробное рассмотрение 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

1-ое отличие 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, вероятен результат, в котором изображение будет очень широким, таким образом, теряя важные детали, которые имеют возможность повлиять на восприятие пользователем.

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

CSS

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

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

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

CSS

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

CSS

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

Аватарки юзеров

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

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

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

CSS

Перечень логотипов

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

CSS

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

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

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

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

CSS

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

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

HERO-фон

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

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

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

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

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

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

CSS

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

CSS

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

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

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

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

CSS

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

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

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

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

CSS

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

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

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

CSS

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

Сейчас видео покрывает всю ширину и высоту собственного родителя

Заключение

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

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

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

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

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