Свойство CSS object-position
Используйте свойство CSS object-position для определения позиции элемента внутри его контейнера. Значения свойства и примеры.
Свойство CSS object-position задаёт расположение замещаемого элемента — например, <img> или <video> — внутри его блока. Замещаемый элемент — это элемент, содержимое которого поступает из внешнего источника, а не из CSS, поэтому браузер самостоятельно решает, как разместить это содержимое в пространстве блока.
Само по себе object-position не производит видимого эффекта, если внутренний размер элемента совпадает с размером блока. Это несоответствие создаётся свойством object-fit: после того как object-fit масштабирует или обрезает содержимое (например, с помощью cover или contain), object-position определяет, какая часть содержимого остаётся в области видимости. Представьте блок как окно, а изображение — как большую картину за ним: object-position сдвигает картину так, чтобы через окно была видна нужная область.
Значение задаётся одной или двумя координатами: первая управляет осью X (горизонталь), вторая — осью Y (вертикаль). Если указана только одна координата, вторая по умолчанию принимает значение center.
/* keyword pairs */
object-position: left top;
object-position: right bottom;
/* lengths and percentages */
object-position: 10px 20%;
object-position: 50% 50%; /* the default — centered */Каждая координата может быть ключевым словом (left, right, top, bottom, center), длиной (px, em, …) или процентом. Значение 0% выравнивает соответствующий край содержимого с тем же краем блока; 100% выравнивает противоположные края.
Отрицательные значения допустимы — object-position: -20px 0; выдвигает содержимое за левый край блока, скрывая ту полосу.
| Начальное значение | 50% 50% |
|---|---|
| Применяется к | Замещаемым элементам. |
| Наследуется | Нет. |
| Анимируемое | Да. Изображение поддерживает анимацию. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.objectPosition = "20% 0%"; |
Синтаксис
object-position: <position> | initial | inherit;Примеры
Пример с позицией по умолчанию (50% 50%)
Значение по умолчанию центрирует содержимое. Поскольку object-fit: cover обрезает изображение, чтобы оно заполнило блок, центрирование оставляет в зоне видимости среднюю часть изображения.
<!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="/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
При значении left горизонтальная ось привязывается к левому краю блока (вертикальная ось по умолчанию принимает значение center), поэтому левая сторона обрезанного изображения остаётся в области видимости.
<!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="/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>Пример с длиной и процентом (10px 20%)
Для двух осей можно смешивать единицы измерения. Здесь содержимое смещено на 10px от левого края и на 20% вниз относительно блока.
<!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="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: 10px 20%</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Значения
| Значение | Описание |
|---|---|
<position> | Задаёт позицию замещаемого элемента внутри его блока. Может быть ключевым словом (top, bottom, left, right, center) или комбинацией ключевых слов, процентов и длин. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Наследует свойство от родительского элемента. |
Когда использовать
object-position наиболее полезно для адаптивного кадрирования изображений. Когда фотография должна заполнять контейнер фиксированного размера (миниатюра карточки, баннер-герой, аватар) с object-fit: cover, браузер обрезает всё, что не помещается. По умолчанию обрезка происходит равномерно от центра, что может скрыть важную часть фотографии — например, лицо человека в верхней части кадра. Установка object-position: center top позволяет оставить эту область в зоне видимости.
Несколько важных моментов:
- Свойство действует только на замещаемые элементы (
<img>,<video>,<input type="image">, иногда<object>). На<div>оно не влияет. - Оно используется совместно с object-fit:
object-fitопределяет, как масштабируется или обрезается содержимое, аobject-position— где располагается видимая область. - Синтаксис повторяет свойство background-position, поэтому применяются те же правила для ключевых слов и процентов.