Свойство object-position CSS
- Предыдущая страница Свойство object-fit CSS
- Следующая страница Маски CSS
CSS object-position свойство используется для указания местоположения <img> или <video> в их контейнере.
изображение
Посмотрите на это изображение из Вуханя, размером 600x400 пикселей:
Далее, мы используем object-fit: cover; для поддержания пропорций и заполнения заданного размера. Однако, изображение будет обрезано, чтобы соответствовать, как показано ниже:
Пример
img {
width: 266px;
height: 400px;
object-fit: cover;
}
использование свойства object-position
Предположим, что часть изображения, которая отображается, не находится в нужном месте. Чтобы позиционировать изображение, мы будем использовать object-position свойство.
Здесь мы будем использовать object-position свойство для позиционирования изображения, чтобы древние здания находились в центре:
Пример
img {
width: 266px;
height: 400px;
object-fit: cover;
property-position: 50% 100%;
}
Здесь мы будем использовать object-position Используйте свойства для позиционирования изображения, чтобы известная башня Цзинъюэ находилась справа:
Пример
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 25% 100%;
}
Свойства CSS object-*
В таблице ниже перечислены свойства CSS object-*:
| Свойство | Описание |
|---|---|
| object-fit | Определите, как <img> или <video> должны быть изменены в размерах, чтобы адаптироваться к их контейнеру. |
| object-position | Определите, как <img> или <video> должны быть расположены в их "собственном контейнере" с помощью координат x/y. |
- Предыдущая страница Свойство object-fit CSS
- Следующая страница Маски CSS
