object-position

Властивість CSS object-position (позиція об'єкта) задає шикування вмісту вибраного заміщеного елемента в межах рамки елемента. Області рамки, які не покриті об'єктом заміщеного елемента, показують фон цього елемента.

Підлаштувати те, як власний розмір об'єкта заміщеного елемента (тобто його природний розмір) підлаштовується до розміру рамки елемента, можна використовуючи властивість object-fit.

Спробуйте його в дії

Синтаксис

/* Значення – ключові слова */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/* Значення <percentage> */
object-position: 25% 75%;

/* Значення <length> */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/* Значення крайових зміщень */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

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

Значення

<position>

Від одного до чотирьох значень, які визначають двовимірне положення елемента. Можна використовувати відносні або абсолютні зміщення.

Примітка: Позицію можна задати так, щоб заміщений елемент був намальований за межами своєї рамки.

Формальне визначення

Формальний синтаксис

<position>
де 
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
де 
<length-percentage> = <length> | <percentage>

Приклади

Позиціювання вмісту зображення

HTML

Тут HTML, що містить два елементи <img>, кожен з яких відображає логотип MDN.

<img id="object-position-1" src="mdn.svg" alt="Логотип MDN" />
<img id="object-position-2" src="mdn.svg" alt="Логотип MDN" />

CSS

CSS включає усталене оформлення самого елемента <img>, а також окремі стилі для кожного з двох зображень.

img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}

Перше зображення розміщене так, щоб його лівий край був відступлений від лівого краю рамки елемента на 10 пікселів. Друге зображення розміщене так, щоб його правий край стояв по правому краю рамки елемента, а саме зображення розміщене на відстані 10% від верхнього краю рамки елемента.

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• Інші властивості CSS, пов'язані з зображеннями: object-fit, image-orientation, image-rendering, image-resolution.