object-position
===============

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

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

Интерактивный пример
--------------------

Синтаксис
---------


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

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

### Значения

`<position>` (en-US)

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


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

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

|  |  |
| --- | --- |
| Начальное значение | `50% 50%` |
| Применяется к | заменяемые элементы |
| Наследуется | да |
| Проценты | относятся к ширине и высоте самого элемента |
| Обработка значения | как указано |
| Animation type | повторяющийся список из  |

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

object-position =   
  <position>    
  
<position> =   
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)  
  [ (en-US) left | (en-US) center | (en-US) right ] (en-US) && (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US)  | (en-US)  
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)  
  [ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US)    
  
<length-percentage> =   
  <length>      | (en-US)  
  <percentage>    
  
```

Примеры
-------

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

#### HTML

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


```html
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
```


#### CSS

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


```css
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% высоты блока элемента.

#### Результат

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

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-position |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Другие CSS-свойства, связанные с изображениями: `object-fit`, `image-orientation` (en-US), `image-rendering` (en-US), `image-resolution` (en-US).