Object fit css что это

Как использовать свойство object-fit

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

В тех ситуациях, когда картинка не соответствует размеру бокса, но её нужно вставить, рекомендуется использовать object-fit . Он определяет, как элемент реагирует на размеры своего бокса. object-fit предназначается для замещаемых элементов — , , , .

С помощью object-fit можно обрезать встроенное изображение и определить, как оно будет сжиматься и растягиваться.

Значения свойства object-fit

Каждое изображение имеет оригинальный размер и бокс, в котором отображается. Например, картинка может иметь размеры 1920x1080px , а бокс будет 1024x768px . Изображение сожмётся до бокса, и пользователь увидит сжатые размеры, но при этом оригинальный размер картинки останется прежним. Свойство object-fit имеет несколько значений, каждое из которых влияет на отображение изображений.

Значение fill

fill — изображение заполняет всю доступную область элемента, при этом его пропорции могут быть искажены. Задача fill — растянуть картинку до размеров её бокса. Из-за этого могут получаться сплющенные картинки.

.keks

Значение contain

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

Задача contain — сохранить пропорции оригинальной картинки, бокс заполнять не обязательно.

.keksblack

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

Также это значение подходит для размещения логотипов, у которых есть определённый дизайн и они не должны меняться.

⭐ Для всех ситуаций, когда ограничена область показа и когда изображение точно не должно изменяться, используйте object-fit: contain .

Значение cover

cover — изображение масштабируется таким образом, чтобы полностью заполнить родительский элемент. Пропорции сохранятся, но всё, что не поместится в размер бокса, обрежется.

.keks

Значение none

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

.keks

Оригинал изображения для сравнения

Значение scale-down

scale-down — это значение определяется автоматически и выбирает более подходящее значение между none и contain . Если размеры изображения больше размеров родительского элемента, то scale-down будет вести себя как contain , иначе — как none .

.keks

Как использовать object-fit на практике

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

.keks

В статьях, тоже важно соблюдать пропорции картинок. При изменении картинок важно следить, чтобы вёрстка не сломалась.

Например, если картинка изменится, как видим ниже, то контент вокруг перестроится. В этом случае ничего не нужно делать, пропорции картинки не нарушают вёрстку.

Если в разметку добавить огромную картинку, она может нарушить сетку страницы. Чтобы этого не происходило, рекомендуется добавлять изображениям max-width: 100% . Тогда максимальный размер картинки всегда будет соответствовать размеру её родителя, и она не сможет выйти за его пределы. Всегда следуйте этому правилу. Свойство object-fit — удобный инструмент, который позволяет легко управлять отображением изображений на веб-страницах. Свойство контролирует соотношение сторон и поведение изображения при изменении размеров его родительского элемента.

Материалы по теме

• Как добавить изображение на страницу
• Как сделать картинку ссылкой
• Как размыть картинку. CSS-свойство filter

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

• 13 ноября 2023

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

• 1 ноября 2023

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

• 13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

• IE 11, 10, 9, 8, 7, …
• Chrome 4–35
• Edge 12 и 13
• Safari 3–9.1
• Firefox 2–38
• Opera 22 и ниже
• Android 4.4.4 KitKat и ниже (а это
• Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

• 23 сентября 2023

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

• 7 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

• 29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 
Центрированный текст
 
 

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

• 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

• 28 июля 2023

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

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

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

• 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

• 13 июля 2023

object — fit

Подстраиваем картинку или видео под контейнер без деформации.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 8 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

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

По своему поведению очень похоже на свойство background — size для фоновых изображений.

Пример

Скопировать ссылку «Пример» Скопировано

Представим, что у нас есть картинка размером 500 на 150 пикселей:

   src="https://doka.guide/css/object-fit/images/landscape.jpg" alt="Картинка из примера про object-fit"> img class="image" src="images/landscape.jpg" alt="Картинка из примера про object-fit" >    Скопировать Скопировано Не удалось скопировать   

По дизайну картинка должна занимать 250 на 250 пикселей. Если мы просто зададим эти размеры, то картинка сильно деформируется.

 .parent  width: 250px; height: 250px; border: 1px solid #FFFFFF; /* Для наглядности */> .parent  width: 250px; height: 250px; border: 1px solid #FFFFFF; /* Для наглядности */ >    Скопировать Скопировано Не удалось скопировать   

Выглядит не очень. Но тут на помощь приходит свойство object — fit , которое позволит нам сохранить пропорции исходного изображения при подстройке под нужные нам размеры.

 .image  object-fit: cover;> .image  object-fit: cover; >    Скопировать Скопировано Не удалось скопировать   

Картинка не деформировалась, подстроилась под нужные размеры. Другой вопрос, что на ней теперь почти ничего не видно ��, но это мелочи.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Свойство задаётся для самого тега , не для родителя. Пишем свойство, а в качестве значения задаём одно из ключевых слов. В отличие от background — size мы не можем задать конкретные размеры в качестве значения ��

• fill — значение по умолчанию, картинка полностью вписывается в указанные размеры без соблюдения собственных пропорций. Часто это приводит к ощутимым деформациям.
• contain — картинка подстроится под заданные размеры так, чтобы поместиться внутри целиком без нарушения пропорций.
• cover — картинка без нарушения пропорций заполнит всю доступную область, обрезая всё ненужное.
• none — картинка отображается без изменения пропорций или размеров.
• scale — down — браузер сравнивает размеры картинки со значением none и со значением contain и выбирает одно из этих значений, деформируя картинку соответствующим образом. Сложно объяснить, посмотрите демку ��

Советую поизменять размер окна браузера чтобы наглядно увидеть как картинки подстраиваются (или нет) под заданные размеры.

Как понять

Скопировать ссылку «Как понять» Скопировано

Дословно свойство переводится как «объект подходит», что вполне точно отражает принцип его работы. Свойство управляет тем, как подгружаемая картинка будет вписываться в рамки заданных размеров.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Задавайте свойство самой картинке , не родительскому контейнеру.

�� Работает только если картинке задан хотя бы один размер: ширина или высота. Иначе браузер не понимает в какую область нужно вписать картинку.

�� Свойство и его значение не наследуется. Хотя я бы посмотрела на то, как вы вложите что-нибудь внутрь картинки 0_о

�� Классно работает в сочетании со свойством object — position .

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Самое полезное из всех доступных значений, на мой взгляд, значение cover . Оно позволяет имитировать поведение фонового изображения для элементов или . В последнем случае это особенно актуально потому что нет других способов красиво адаптировать видео под любой размер экрана без нарушения пропорций по дороге.

Как использовать 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 .

Надеемся, что данная статья была вам полезна. Спасибо, что дочитали ее до конца.

Свойства object-fit и object-position

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

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

Свойство object-fit масштабирует, обрезает или растягивает содержимое замещаемых элементов. Свойство хорошо поддерживается в последних версиях Chrome, Firefox и Safari. Для браузера IE8-11 можно использовать полифил (библиотеку, добавляющую в старые браузеры поддержку свойств, работающих в современных браузерах).

Поддержка браузерами

IE: не поддерживает
Firefox: 36.0
Chrome: 31.0
Safari: 7.1 только object-fit, 10.0 полная поддержка
Opera: 19.0
iOS Safari: 8.0 только object-fit, 10.1 полная поддержка
Opera Mini: -o-
Android: 4.4.4
Chrome for Android: 54.0

object-fit
fill	Значение по умолчанию. Содержимое замещаемого элемента полностью заполняет область контейнера тега, используя его высоту и ширину.
contain	Содержимое элемента масштабируется, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью поместиться внутри контейнера.
cover	Содержимое элемента обрезается, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера.
scale-down	Содержимое элемента выбирает из двух значений none и contain то значение, которое даёт меньшие размеры.
none	Замещаемое содержимое не изменяет свои собственные размеры, чтобы поместиться и заполнить область контейнера.
initial	Устанавливает это свойство в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

2. Свойство object-position

Свойство object-position используется в сочетании с object-fit и задаёт положение содержимого замещаемого элемента внутри контейнера относительно координатных осей X и Y. Значение по умолчанию 50% 50% . Свойство анимируется. Не наследуется.

object-position
Значения:
left top , left center , left bottom , right top , right center , right bottom , center top , center center , center bottom	Позиционирование по горизонтали и вертикали задаётся с помощью пары ключевых слов. Если задано одно ключевое слово, второе примет значение center .
px / em/ %	Указывается два значения, первое определяет расстояние между левой стороной изображения и левым краем элемента-контейнера (по горизонтали), второе значение указывает расстояние между верхней стороной изображения и верхним краем элемента-контейнера (по вертикали). Также можно использовать отрицательные значения для обрезки части контента. Процентное значение рассчитывается относительно содержимого и контейнера, в котором оно расположено. Одновременно можно комбинировать значения в px, em и % .
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.