CSS Свойство object-position
CSS свойство object-position используется для указания того, как <img> или <video> должен быть помещен в свой контейнер.
Изображение
Посмотрите на следующее изображение из Парижа, оно составляет 400x300 пикселей:
Затем мы используем 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 внутри "собственного поля содержимого". |
