object-position
Свойство object-position применяется для выравнивания содержимого такого элемента как <img>, <video> или <object> внутри его блока. Это свойство работает аналогично background-position для фоновых изображений.
Краткая информация
Значение по умолчанию | 50% 50% |
---|---|
Наследуется | Нет |
Применяется | К <img>, <video>, <object>, <input type="image"> |
Анимируется | Да |
Синтаксис
object-position: [ left | center | right | top | bottom | <размер> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <размер> ] [ top | center | bottom | <размер> ] | [ [ left | right ] <размер> ] && [ [ top | bottom ] <размер> ] ]
Значения
У свойства object-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселях или других единицах CSS. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задаётся положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.
- top left = left top = 0% 0% (в левом верхнем углу)
- top = top center = center top = 50% 0% (по центру вверху)
- right top = top right = 100% 0% (в правом верхнем углу)
- left = left center = center left = 0% 50% (по левому краю и по центру)
- center = center center = 50% 50% (по центру)
- right = right center = center right = 100% 50% (по правому краю и по центру)
- bottom left = left bottom = 0% 100% (в левом нижнем углу)
- bottom = bottom center = center bottom = 50% 100% (по центру внизу)
- bottom right = right bottom = 100% 100% (в правом нижнем углу)
В скобках указано положение элемента .
Песочница
img { object-fit: none; object-position: center center; }
Пример
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>object-position</title> </head> <body> <div class="hero"> <img src="image/mushroom_landscape.jpg" alt=""> </div> </body> </html>
Объектная модель
Объект.style.objectPosition
Спецификация
Браузеры
79 | 32 | 19 | 10 | 36 |
4.4.3 | 36 | 19 | 10 |