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

Свойство object-position используется вместе со свойством object-fit, чтобы определить, как должен быть позиционирован элемент внутри блока относительно координатных осей x/y. Первое значение контролирует ось x, а второе - y.

Позицию можно задать с помощью ключевых слов: left, center, right или числами (px или %).

Отрицательные значения допустимы.
Initial Value 50% 50%
Applies to Замененные элементы.
Inherited Да.
Animatable Да.Изображение анимируемое.
Version CSS3
DOM Syntax object.style.objectPosition = "20% 0%";

Синтаксис

object-fit: position | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      border: 2px solid #8ebf42;
      object-fit: none;
      object-position: 50% 50%;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства object-position</h2>
    <h3>Оригинальное изображение:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Object-position: 50% 50%</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

Пример, где установлено значение "left":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      border: 2px solid #8ebf42;
      object-fit: none;
      object-position: left;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства object-position</h2>
    <h3>Оригинальное изображение:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Object-position: left</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

Пример, где первое значение установлено в "px", а второе - в "%":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      border: 2px solid #8ebf42;
      object-fit: none;
      object-position: 10px 20%;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства object-position</h2>
    <h3>Оригинальное изображение:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Object-position: left</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

Значения

Значение Описание
position Определяет положение элемента внутри блока..
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
31.0+ 16.0 partial 36.0+ 10.0+ 19.0+
11.6 -o-

Практикуйте свои знания

What is the functionality of the CSS property 'object-position'?
Считаете ли это полезным?