CSS Свойство object-position используется для указания того, как <img> или <video> должно располагаться внутри его контейнера.
Изображение
Посмотрите на следующее изображение Париж размером 400x300 пикселей:
Далее мы используем object-fit: cover;, чтобы сохранить соотношение сторон и заполнить заданный размер. Однако изображение будет обрезано по размеру, вот так:
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Попробуйте сами »
Использование свойства object-position
Допустим, что часть изображения, которая показана, расположена не так, как мы хотим. Чтобы расположить изображение, мы будем использовать свойство object-position.
Здесь мы будем использовать свойство object-position, чтобы расположить изображение так, чтобы большое старое здание находилось в центре:
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Попробуйте сами »
Здесь мы будем использовать свойство object-position, чтобы расположить изображение так, чтобы знаменитая Эйфелева башня находилась в центре:
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
Попробуйте сами »
CSS Свойства object-*
В следующей таблице перечислены CSS свойства object-*:
| Свойства | Описание |
|---|---|
| object-fit | Указывает, как следует изменять размер <img> или <video>, чтобы соответствовать его контейнеру |
| object-posititon | Указывает, как <img> или <video> должно располагаться с координатами x/y внутри его "собственного поля содержимого" |