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

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

Это свойство можно задавать с помощью ключевого слова (left, center, right, top или bottom) либо числа (в px или %).

INFO

Отрицательные значения допустимы.

Initial Value	50% 50%
Applies to	Replaced elements.
Inherited	No.
Animatable	Yes. The image is animatable.
Version	CSS3
DOM Syntax	object.style.objectPosition = "20% 0%";

Синтаксис

Синтаксис CSS object-position

css

object-position: <position> | initial | inherit;

Пример свойства object-position:

Пример кода CSS object-position

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        border: 2px solid #8ebf42;
        object-fit: cover;
        object-position: 50% 50%;
      }
    </style>
  </head>
  <body>
    <h2>Object-position property example</h2>
    <h3>Original image:</h3>
    <img src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
    <h3>Object-position: 50% 50%</h3>
    <img class="tree" src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
  </body>
</html>

Try it Yourself »

Результат

CSS object-position left

Пример свойства object-position, заданного как "left":

Пример CSS object-position left

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        border: 2px solid #8ebf42;
        object-fit: cover;
        object-position: left;
      }
    </style>
  </head>
  <body>
    <h2>Object-position property example</h2>
    <h3>Original image:</h3>
    <img src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
    <h3>Object-position: left</h3>
    <img class="tree" src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
  </body>
</html>

Try it Yourself »

Пример свойства object-position, заданного в "px" и "%":

Пример CSS object-position с числом

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        border: 2px solid #8ebf42;
        object-fit: cover;
        object-position: 10px 20%;
      }
    </style>
  </head>
  <body>
    <h2>Object-position property example</h2>
    <h3>Original image:</h3>
    <img src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
    <h3>Object-position: 10px 20%</h3>
    <img class="tree" src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
  </body>
</html>

Try it Yourself »

Значения

Value	Description
`<position>`	Указывает положение заменяемого элемента внутри его box. Может быть ключевым словом (`top`, `bottom`, `left`, `right`, `center`) или комбинацией ключевых слов, процентов либо длин.
`initial`	Устанавливает свойство в значение по умолчанию.
`inherit`	Наследует свойство от родительского элемента.

Practice

Что делает свойство 'object-position' в CSS?

Оно позволяет настраивать позиционирование объекта внутри его content box.Оно добавляет рамку к объекту.Оно изменяет цвет объекта.Оно работает вместе с другими свойствами, такими как 'object-fit'.

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

Синтаксис ​

Пример свойства object-position: ​

Результат ​

Пример свойства object-position, заданного как "left": ​

Пример свойства object-position, заданного в "px" и "%": ​

Значения ​

Practice ​

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

Синтаксис

Пример свойства object-position:

Результат

Пример свойства object-position, заданного как "left":

Пример свойства object-position, заданного в "px" и "%":

Значения

Practice