object-position

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

object-position: 50% 50%;

object-position: right top;

object-position: left bottom;

object-position: 250px 125px;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/proxy/developer.mozilla.org/shared-assets/images/examples/moon.jpg" />
</section>

#example-element {
  height: 250px;
  width: 250px;
  object-fit: none;
  border: 1px solid red;
}

Синтаксис

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

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

Значения

<position>

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

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

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

object-position = 
  <position>  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<length-percentage> = 
  <length>      |
  <percentage>  

Примеры

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

HTML

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

<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>-элемента, а также отдельные стили для обоих изображений.

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-свойства, связанные с изображениями: object-fit, image-orientation, image-rendering, image-resolution.