object-position

Базовая Широко доступная

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

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

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

Попробуйте

Синтаксис

/* 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;

Значения

<position>: От одного до четырёх значений, которые определяют 2D положение элемента. Можно использовать относительные или абсолютные смещения.

Примечание: Положение может быть установлено таким образом, что заменённый элемент отображается за пределами своей области.

Формальное определение

Начальное значение	`50% 50%`
Применяется к	заменённым элементам
Наследуется	да
Проценты	относятся к ширине и высоте самого элемента
Вычисленное значение	как указано
Тип анимации	повторяющийся список

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

object-position = 
  <position>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ 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 Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />

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 Images Module Level 3 # the-object-position

Совместимость браузеров

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`object-position`	32	79 16–79 Поддерживается только для `<img>` элементов.	36	1911.6–15	10	32	36	1912–14	10	2.0	4.4.3
`applies_to_iframe_elements`	Нет	Нет	36	Нет	Нет	Нет	36	Нет	Нет	Нет	Нет

См. также

Другие свойства CSS, связанные с изображением: object-fit, image-orientation, image-rendering, image-resolution.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position