object-position

Свойство object-position определяет выравнивание содержимого выбранного замененного элемента в поле элемента. Области поля, которые не покрыты объектом замененного элемента, будут отображать фон элемента.

Вы можете настроить, как внутренний размер объекта замененного элемента (т. е. его естественный размер) корректируется, чтобы он помещался в поле элемента, используя свойство object-fit.

Демо

Изображения, фильтры, композиция

• image-orientation
• image-rendering
• image-resolution
• object-fit
• object-position

• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• conic-gradient()
• repeating-conic-gradient()
• url()
• element()
• image()
• cross-fade()

• backdrop-filter
• filter

• background-blend-mode
• isolation
• mix-blend-mode

• contain
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• container
• container-name
• container-type
• @container
• content-visibility

Синтаксис

/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/* <percentage> values */
object-position: 25% 75%;

/* <length> values */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/* Edge offsets values */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;

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

Ссылки

• Свойство object-position ^{MDN (рус.)}
• CSS Images Module Level 3 ^{Spec (англ.)}

Комментарии