object-position
Какая часть обрезанной `<img>` или `<video>` остаётся видна.
Синтаксис
object-position: x y;Значения
| Параметр | Тип | Описание |
|---|---|---|
| center | top | right | bottom | left | keyword | Ключевые слова, одно или два: `center top`. |
| x y | length | Смещения: `20% 50%`, `10px 0`. |
Примеры
Левая, центральная и правая части одной фотографии:
<style>
img { width: 100px; height: 100px; object-fit: cover; border: 1px solid gray; }
</style>
<img src="/media/photo-400x250.jpg" alt="" style="object-position: left;">
<img src="/media/photo-400x250.jpg" alt="" style="object-position: center;">
<img src="/media/photo-400x250.jpg" alt="" style="object-position: right;">Примечания
Работает вместе с object-fit: cover или none. По умолчанию — center.
См. также
- object-fit — Как картинка `<img>` или `<video>` вписывается в размеры элемента.
- background-position — Где внутри блока находится фоновая картинка.
Вопросы и ответы по теме
В учебнике
- Адаптивные изображения — Как картинки подстраиваются под экран — max-width, aspect-ratio, object-fit, атрибуты srcset и sizes, элемент picture.