object-position

Примеры

Базовый пример

Используйте утилиты такие как object-left и object-bottom-right для указания того, как содержимое заменяемого элемента должно позиционироваться внутри его контейнера:

Наведите на примеры, чтобы увидеть полное изображение

object-top-left

object-top

object-top-right

object-left

object-center

object-right

object-bottom-left

object-bottom

object-bottom-right

<img class="size-24 object-top-left ..." src="/img/mountains.jpg" /><img class="size-24 object-top ..." src="/img/mountains.jpg" /><img class="size-24 object-top-right ..." src="/img/mountains.jpg" /><img class="size-24 object-left ..." src="/img/mountains.jpg" /><img class="size-24 object-center ..." src="/img/mountains.jpg" /><img class="size-24 object-right ..." src="/img/mountains.jpg" /><img class="size-24 object-bottom-left ..." src="/img/mountains.jpg" /><img class="size-24 object-bottom ..." src="/img/mountains.jpg" /><img class="size-24 object-bottom-right ..." src="/img/mountains.jpg" />

Использование пользовательского значения

Используйте синтаксис object-[<value>] , чтобы задать object position на основе полностью пользовательского значения:

<img class="object-[25%_75%] ..." src="/img/mountains.jpg" />

Для переменных CSS вы также можете использовать синтаксис: object-(<custom-property>)

<img class="object-(--my-object) ..." src="/img/mountains.jpg" />

Это просто сокращение, object-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс an object-position утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<img class="object-center md:object-top ..." src="/img/mountains.jpg" />

Подробнее об использовании вариантов читайте в документации по вариантам.