Свойство object-position CSS
- предыдущая страница object-fit
- следующая страница offset
определение и использование
свойство object-position, совместно с object-fit, определяет, как использовать координаты x/y для定位 <img> или <video> в их "своем контейнерном окне".
еще см.:
Уроки CSS:CSS object-fit
Руководство по CSS:CSS object-position
Руководство по HTML DOM:атрибут objectPosition
пример
изменить размер изображения, чтобы он подходил его контейнерной рамке, и переместить его в рамке с левой стороны на 5px и с верхней стороны на 10%:
img.a {
width: 200px;
height: 400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
CSS синтаксис
object-position: position|initial|inherit;
значение атрибута
| значение | описание |
|---|---|
| position |
определяет положение изображения или видео в его контейнерной рамке. первое значение контролирует ось x, второе значение контролирует ось y. может быть строкой (left, center или right) или числом (в px или %). Допускаются отрицательные значения. |
| initial | установить этот атрибут в его значение по умолчанию. См. также initial. |
| inherit | иногда этот атрибут наследуется от родительского элемента. См. также inherit. |
технические детали
| по умолчанию: | 50% 50% |
|---|---|
| наследование: | да |
| создание анимации: | поддерживается. См. также:атрибуты, связанные с анимацией. |
| версия: | CSS3 |
| JavaScript синтаксис: | object.style.objectPosition="0 10%" |
поддержка браузера
Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.
| IE / Edge | Firefox | Safari | Opera | О CodeW3C.com |
|---|---|---|---|---|
| 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
- предыдущая страница object-fit
- следующая страница offset
