object-fit
Свойство object-fit определяет, как содержимое заменяемого элемента, такого как или , должно заполнять контейнер относительно его высоты и ширины.
Интерактивный пример
Синтаксис
Для object-fit можно указать одно из нижеперечисленных свойств.
Значения
Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.
Смещаемый контент меняет свой размер таким образом, чтобы подстроиться под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определён как «помещённый внутрь» блока, ограничиваясь его шириной и высотой.
Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определён как «покрытие» блока, ограничиваясь его шириной и высотой.
Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определён с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.
Контент изменяет размер, сравнивая разницу между none и contain , для того, чтобы найти наименьший конкретный размер объекта.
Правильный синтаксис
object-fit =
fill | (en-US)
contain | (en-US)
cover | (en-US)
none | (en-US)
scale-down
Пример
HTML Контент
div> h2>object-fit: fillh2> img src="mdn_logo_only_color.png" alt="MDN Logo" class="fill" /> img src="mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow" /> h2>object-fit: containh2> img src="mdn_logo_only_color.png" alt="MDN Logo" class="contain" /> img src="mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow" /> h2>object-fit: coverh2> img src="mdn_logo_only_color.png" alt="MDN Logo" class="cover" /> img src="mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow" /> h2>object-fit: noneh2> img src="mdn_logo_only_color.png" alt="MDN Logo" class="none" /> img src="mdn_logo_only_color.png" alt="MDN Logo" class="none narrow" /> h2>object-fit: scale-downh2> img src="mdn_logo_only_color.png" alt="MDN Logo" class="scale-down" /> img src="mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow" /> div>
CSS Контент
h2 font-family: Courier New, monospace; font-size: 1em; margin: 1em 0 0.3em; > div display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; height: 940px; > img width: 150px; height: 100px; border: 1px solid #000; > .narrow width: 100px; height: 150px; margin-top: 10px; > .fill object-fit: fill; > .contain object-fit: contain; > .cover object-fit: cover; > .none object-fit: none; > .scale-down object-fit: scale-down; >
Результат
Технические параметры
| Specification |
|---|
| CSS Images Module Level 3 # the-object-fit |
| Начальное значение | fill |
|---|---|
| Применяется к | заменяемые элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |
Как использовать object-fit и background-size в CSS
Мы не всегда можем предоставить для HTML элемента изображение нужного размера. Если же мы используем контейнер с шириной и высотой, которые не пропорциональны соотношению сторон изображения, то изображение будет либо сжато, либо растянуто. Это выглядит нехорошо, однако решить эту проблему можно либо применив свойство object-fit к элементу img , либо с помощью свойства background-size .
Для начала давайте определимся с проблемой. Посмотрите на следующий рисунок:
Почему это происходит?
Браузер заполняет содержащий изображение элемент заданным изображением. При этом у любого изображения есть свое соотношение сторон. И если соотношение сторон изображения отличается от указанных для него ширины и высоты, то результатом будет либо сжатое, либо растянутое изображение.
Мы видим это на следующем рисунке:
Решение проблемы
Нам не всегда нужно добавлять изображение другого размера, если соотношение сторон изображения не совпадает с шириной и высотой контейнера. Прежде чем погрузиться в CSS-решения, мы хотим показать вам, как мы делали это в приложениях для редактирования изображений:
Теперь, когда мы понимаем, как это работает, давайте разберемся, как это работает в браузере.
CSS свойство object-fit
Свойство object-fit определяет, как должен измениться размер содержимого заменяемого элемента, например, img или video , чтобы подстроиться под контейнер. По умолчанию object-fit имеет значение fill , что может привести к сжиманию или растягиванию изображения.
Давайте рассмотрим возможные значения.
object-fit: contain
В этом случае размер изображения будет изменен в соответствии с соотношением сторон контейнера. Если соотношение сторон изображения не совпадает с соотношением сторон контейнера, то оно будет дополнено черными каше.
object-fit: cover
В этом случае размер изображения также будет изменен в соответствии с соотношением сторон контейнера, и если соотношение сторон изображения не соответствует размеру контейнера, оно будет обрезано по размеру.
object-fit: fill
При этом значении размер изображения будет изменен в соответствии с соотношением сторон контейнера, и если соотношение сторон изображения не соответствует размеру контейнера, оно будет либо сжато, либо растянуто. Но мы этого не хотим.
object-fit: none
В этом случае размер изображения вообще не будет изменен, ни растянут, ни сжат. Это значение работает так же, как значение cover , но при этом не учитывается соотношение сторон контейнера.
Кроме свойства object-fit , еще есть свойство object-position , которое отвечает за положение изображения внутри контейнера.
Возможные значения свойства object-position
Свойство object-position работает аналогично свойству CSS background-position :
Ключевые слова top и bottom также работают, когда соотношение сторон контейнера по вертикали больше:
Свойство background-size
Основное отличие свойства background-size заключается в том, что мы имеем дело с фоном, а не с HTML элементом ( img ).
Возможные значения background-size
Свойство background-size может принимать значения auto , contain и cover .
background-size: auto
При значении auto изображение сохраняет свой оригинальный размер:
background-size: cover
В этом случае размер изображения будет изменен таким образом, чтобы оно помещалось в контейнер. Если пропорции не совпадают, то изображение будет обработано таким образом, чтобы оно подошло под размеры контейнера.
background-size: contain
В этом случае размер изображения будет изменен таким образом, чтобы оно помещалось в контейнер. Если соотношение сторон не совпадает, то изображение будет дополнено черными полосами (каше), как показано в следующем примере:
Что касается background-position , то оно работает также, как object-position . Единственное отличие состоит в том, что позиция по умолчанию object-position отличается от позиции по умолчанию background-position .
Когда не следует использовать object-fit или background-size
Если элементу или изображению задана фиксированная высота и установлено свойство background-size: cover или object-fit: cover , то появится момент, когда изображение станет слишком широким, что приведет к потере важных деталей, которые могут повлиять на восприятие изображения пользователем.
Рассмотрим следующий пример, в котором изображению задана фиксированная высота:
.card__thumb
Если контейнер слишком широк, это приведет к результату, который мы видим на рисунке справа (изображение слишком широкое). Это происходит потому, что мы не задаем соотношение сторон.
Решить эту проблему можно только двумя способами. Первый — это использовать трюк под названием «padding hack», чтобы создать внутреннее соотношение сторон.
.card__thumb < position: relative; padding-bottom: 75%; height: 0; >.card__thumb img
Второй способ это использовать новое CSS свойство aspect-ratio :
.card__thumb img < aspect-ratio: 4 / 3; >
Случаи использования и примеры
Аватары пользователей
Идеальный вариант использования object-fit: cover — это аватары пользователей. Обычно соотношение сторон, допустимое для аватара, квадратное. Размещение изображения в квадратном контейнере может исказить изображение.
.c-avatar
Список логотипов
Список клиентов бизнеса имеет важное значение. Обычно для этого используют их логотипы. Поскольку логотипы часто бывают разных размеров, нам нужен способ изменить их размер без искажения.
К счастью, для этого отлично подходит object-fit: contain .
.logo__img
Миниатюра для статьи
Это очень распространенный вариант использования. Контейнер для миниатюры статьи может не всегда содержать изображение с одинаковым соотношением сторон. Эта проблема в первую очередь должна устраняться системой управления контентом (CMS), но это происходит не всегда.
.article__thumb
Задний фон заголовка статьи
В этом случае решение о том, использовать элемент img или фон CSS будет зависеть от следующего:
- Имеет ли изображение важное значение? Если CSS по какой-то причине будет отключен, хотим ли мы, чтобы пользователь видел изображение?
- Или же у изображения просто декоративное назначение?
Основываясь на ответе на эти вопросы, мы можем решить, какой способ использовать. Если изображение важно:
.hero < position: relative; >.hero__thumb
Если изображение имеет чисто декоративную функцию, то мы можем использовать свойство background-image :
.hero
В этом случае код CSS будет короче. Стоит убедиться, что весь текст, отображаемый поверх изображения, хорошо виден.
Добавление фона к изображению при помощи object-fit: contain
А вы знаете, что вы можете добавить цвет фона для img ? Это еще один плюс при использовании object-fit: contain .
В приведенном ниже примере у нас есть сетка изображений. Если соотношение сторон изображения и контейнера отличается, появится цвет фона.
Видеоэлемент
Требовалось ли вам когда-нибудь установить видео в качестве фона? Если да, то вы, вероятно, хотели бы, чтобы оно занимало бы всю ширину и высоту родительского элемента.
.hero < position: relative; background-color: #def4fd; >.hero__video
Чтобы видео полностью заполнило родительский элемент, нам нужно переопределить значение по умолчанию у object-fit :
.hero__video < /* другие стили */ object-fit: cover; >
Заключение
Как вы, наверное, убедились, свойства object-fit и background-size очень полезны для обработки изображений с различными соотношениями сторон. Мы не всегда можем контролировать настройку идеальных размеров для каждого изображения, и именно здесь эти два CSS свойства незаменимы.
И еще стоит дружески напомнить о выборе между элементом img и фоном CSS: Если изображение является чисто декоративным, выбирайте фон CSS. В противном случае более подходит элемент img .
Надеемся, что данная статья была вам полезна. Спасибо, что дочитали ее до конца.
CSS свойство object-fit
Свойство object-fit определяет, как должен измениться размер элемента, чтобы он поместился в блоке.
Свойство object-fit дает возможность поместить контент изображения таким образом, чтобы он соответствовал размерам, указанным в таблице стилей.
При помощи значений свойства можно увеличить, уменьшить, обрезать или растянуть контент таким образом, чтобы он соответствовал указанным размерам ширины и высоты. Свойство имеет пять значений:
Синтаксис
object-fit: fill | contain | cover | scale-down | none | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> img.tree < width: 200px; height: 400px; object-fit: fill; > style> head> body> h2>Пример свойства object-fit h2> h3>Оригинальное изображение: h3> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200"> h3>Значение fill: h3> img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200"> body> html>Пример со значением «cover», где края изображения обрезаны, а пропорции сохранены:
Пример
html> html> head> title>Заголовок документа title> style> img.tree < width: 200px; height: 400px; object-fit: cover; > style> head> body> h2>Пример свойства object-fit h2> h3>Оригинальное изображение: h3> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200"> h3>Значение cover: h3> img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200"> body> html>Пример со значением «contain»:
Пример
html> html> head> title>Заголовок документа title> style> img.tree < width: 200px; height: 400px; object-fit: contain; > style> head> body> h2>Пример свойства object-fit h2> h3>Оригинальное изображение: h3> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200"> h3>Значение contain: h3> img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200"> body> html>Пример со значением «scale-down», где размер изображения уменьшен:
Пример
html> html> head> title>Заголовок документа title> style> img.tree < width: 200px; height: 400px; object-fit: scale-down; > style> head> body> h2>Пример свойства object-fit h2> h3>Оригинальное изображение: h3> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200"> h3>Значение scale-down: h3> img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200"> body> html>Значения
| Значение | Описание |
|---|---|
| fill | Размер контента изменяется таким образом, чтобы заполнить блок. Значение по умолчанию. |
| contain | Контент масштабируется таким образом, чтобы заполнить блок, сохраняя свои пропорции. |
| cover | Пропорции контента меняются при заполнении блока. Контент будет обрезан для заполнения блока. |
| none | Размер контента не меняется. |
| scale-down | Соответствует значению none или contain. Контент элемента будет иметь наименьший размер. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
| 31.0+ | 16.0 partial | 36.0+ | 10.0+ | 19.0+ 11.5-12.1 -o- |
object-fit
fill Элемент масштабируется, чтобы соответствовать заданным размерам, при этом пропорции игнорируются. contain Элемент масштабируется, чтобы целиком уместиться в заданные размеры с соблюдением пропорций. cover Элемент увеличивается или уменьшается, чтобы целиком заполнить заданную область с сохранением пропорций. none Сохраняются исходные пропорции элемента, установленные значения ширины или высоты не влияют на содержимое.
Влияние разных значений на фотографии продемонстрировано на рис. 1. Был использован следующий стиль.
Рис. 1. Фотографии с разным значением object-fit