CSS Свойство object-position
Свойство 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-* Свойства
В следующей таблице перечислены свойства CSS object-*:
Property | Description |
---|---|
object-fit | Specifies how an <img> or <video> should be resized to fit its container |
object-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |