object-position

CSS-свойство object-position определяет выравнивание контента выбранного замещаемого элемента внутри блока элемента. На областях блока, не покрытых объектом замещаемого элемента, будет отображаться фон элемента.

Вы можете задавать способ подстройки собственного размера объекта замещаемого элемента (т. е., его естественного размера) под размер блока элемента, используя свойство object-fit.

Синтаксис

/* значения <position> */
object-position: center top;
object-position: 100px 50px;

/* Глобальные значения */
object-position: inherit;
object-position: initial;
object-position: unset;

Значения

<position>
От одного до четырёх значений, которые определяют 2D-позицию элемента. Могут использоваться как абсолютные, так и относительные значения сдвигов.

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

Формальное определение

Начальное значение50% 50%
Применяется кзаменяемые элементы
Наследуетсяда
Процентыотносятся к ширине и высоте самого элемента
Обработка значениякак указано
Animation typerepeatable list of simple list of length, percentage, or calc

Формальный синтаксис

<position>

где
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

где
<length-percentage> = <length> | <percentage>

Примеры

Позиционирование изображений

HTML

Здесь мы видим HTML, содержаний два <img>-элемента, отображающие логотипы MDN.

<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>

CSS

CSS содержит стандартные стили для самого <img>-элемента, а также отдельные стили для обоих изображений.

img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}

Первое изображение расположено с отступом в 10 пикселей относительно левого края блока элемента. Второе изображение расположено своим правым краем впритык к правому краю блока элемента и сдвинуто вниз на 10% высоты блока элемента.

Результат

Спецификации

Спецификация Состояние Комментарий
CSS Images Module Level 3
Определение 'object-position' в этой спецификации.
Кандидат в рекомендации Первоначальное определение.

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
object-positionChrome Полная поддержка 31Edge Полная поддержка 16Firefox Полная поддержка 36IE Нет поддержки НетOpera Полная поддержка 19
Полная поддержка 19
Полная поддержка 11.6
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari Полная поддержка 10WebView Android Полная поддержка 4.4.3Chrome Android Полная поддержка 31Firefox Android Полная поддержка 36Opera Android Полная поддержка 19
Полная поддержка 19
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari iOS Полная поддержка 10Samsung Internet Android Полная поддержка 2.0
Support for three-value syntax of positionChrome Нет поддержки 31 — 68Edge Нет поддержки 16 — 79Firefox Нет поддержки 36 — 70IE Нет поддержки НетOpera Нет поддержки 19 — 55
Нет поддержки 19 — 55
Полная поддержка 11.6
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari Полная поддержка 10WebView Android Нет поддержки 4.4.3 — 68Chrome Android Нет поддержки 31 — 68Firefox Android Полная поддержка 36Opera Android Нет поддержки 19 — 48
Нет поддержки 19 — 48
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari iOS Полная поддержка 10Samsung Internet Android Нет поддержки 2.0 — 10.0

Легенда

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

Смотрите также