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	Значение элемента наследуется от родительского элемента.