Свойство CSS object-position
Пример
Измените размер изображения, чтобы оно соответствовало его блоку содержимого, и поместите изображение на 5 пикселей слева и на 10% сверху внутри блока содержимого:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Определение и использование
Свойство object-position
используется вместе с object-fit, чтобы указать, как <img> или <video> должны располагаться с координатами x/y внутри своего «собственного блока содержимого».
Значение по умолчанию: | 50% 50% |
---|---|
Унаследовано: | да |
Анимация: | да. Читать об анимации |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.objectPosition="0 10%" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
Синтаксис CSS
object-position: position|initial|inherit;
Значения свойств
Value | Description |
---|---|
position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Связанные страницы
Учебное пособие по CSS: CSS-подгонка объектов
Справочник по CSS: соответствие объекту CSS
Справочник по HTML DOM: свойство objectPosition