CSS-свойство `object-position`

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

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

Попробуйте

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="/shared-assets/images/examples/moon.jpg" />
</section>

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

Синтаксис

/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/* <percentage> values */
object-position: 25% 75%;

/* <length> values */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/* Edge offsets values */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;

Значения

position

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

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

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

object-position = 
  <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="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.