object-position

Определение и применение

Свойство object-position размещает изображение или видео внутри области его элемента. Например, при обрезке портрета можно сохранить лицо ближе к верхнему краю, а при свободных полосах — прижать картинку к нужной стороне.

Как сохранить нужную часть фотографии при обрезке — в уроке «Размеры блочных элементов в CSS».

Попробуйте значения object-position

В рамке задано object-fit: cover. В широкой рамке сравните верх и низ изображения, в высокой — левый и правый края. Меняется видимый фрагмент, а сама рамка остаётся на месте.

Значение свойства

object-position: 50% 50%

HTML и CSS примера
HTML
<div class="stage">
  <figure>
    <figcaption>Оригинал</figcaption>
    <img
      class="original"
      src="@shared/tony/tony-toy.png"
      alt="Тони с игрушкой"
    />
  </figure>
  <figure>
    <figcaption>Результат</figcaption>
    <img
      class="demo-target"
      src="@shared/tony/tony-toy.png"
      alt="Тони с игрушкой"
    />
  </figure>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: start;
  gap: 10px;
  padding: 8px;
}
figure {
  margin: 0;
}
figcaption {
  font-size: 13px;
  margin-bottom: 8px;
}
.original {
  width: 100%;
  max-width: 80px;
  height: auto;
}
.demo-target {
  width: 100%;
  height: 110px;
  border: 2px solid #245a85;
  background: #e4edf3;
  object-fit: cover;
  object-position: 50% 50%;
}

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

Спецификация: CSS images

Поддерживается во всех основных браузерах с 2020 года.

Отдельные значения (4) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.object-position
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
object-position✓32✓79✓36✓19✓10✓32✓36✓19✓10✓2.0✓4.4.3✓10
bottom✓32✓16✓36✓19✓10✓32✓36✓19✓10✓2.0✓4.4.3✓10
center✓32✓16✓36✓19✓10✓32✓36✓19✓10✓2.0✓4.4.3✓10
left✓32✓16✓36✓19✓10✓32✓36✓19✓10✓2.0✓4.4.3✓10
right✓32✓16✓36✓19✓10✓32✓36✓19✓10✓2.0✓4.4.3✓10
top✓32✓16✓36✓19✓10✓32✓36✓19✓10✓2.0✓4.4.3✓10
x-end××××✓26×××✓26××✓26
x-start××××✓26×××✓26××✓26
y-end××××✓26×××✓26××✓26
y-start××××✓26×××✓26××✓26

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
object-position: <position>;

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

<position> — положение по двум осям: ключевые слова, длины и проценты. Например, center, left top, 25% 75% или right 10px bottom 20px.

JavaScript синтаксис:

JavaScript
element.style.objectPosition = "right center";

Начальное значение свойства

50% 50%.

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

Значения object-position
Значение Описание
<position> Одно или несколько значений позиции. Физические края — left, right, top, bottom, середина — center. Два числовых значения задают горизонтальную и вертикальную координаты; одно числовое значение задаёт горизонтальную, вертикальная становится center.
<percentage> Совмещает указанную процентную точку картинки с такой же точкой области. При 50% 50% совпадают центры. Это не процент ширины родителя.
<length> Сдвиг от левого или верхнего края; в записи с краем — от указанного края. Например, right 12px top 8px. Допустимы отрицательные значения и положения за пределами области.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для наследуемого свойства object-position наследует вычисленное значение у родительского элемента.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Почему сдвиг иногда не виден

Свойство работает с заменяемым содержимым, например img, и не перемещает сам элемент. Если картинка точно заполняет область без обрезки и свободного места, выравнивание краёв и центра выглядит одинаково. Задайте несовпадающие пропорции области и картинки, затем выберите для object-fit значение cover или contain.

Для горизонтального процента смещение равно разности ширины области и ширины отрисованной картинки, умноженной на долю. Если область имеет ширину 200px, а картинка — 300px, позиция 100% даёт сдвиг -100px: правые края совпадают. Позиция меняет видимую часть, сохраняя размер рамки.

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

CSS Images — object-position.

Наследуется

Да.

Анимируемое

Да, как повторяемый список значений позиции; совместимые длины и проценты интерполируются плавно.

Примеры, попробуйте сами

Сохранить домик при обрезке

Замените right center на left center, затем на 50% 50%. Квадрат остаётся на месте, меняется видимая часть широкого рисунка.

base.css
CSS
body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.photo {
    display: block;
    border: 3px solid #334155;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Сохранить домик при обрезке</title>
  </head>
  <body>
    <img class="photo" src="assets/landscape.svg" alt="Домик справа на фоне холмов" />
  </body>
</html>
style.css
CSS
.photo {
    width: 220px;
    max-width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: right center;
}