Классы object-* задают свойство object-position — точку, к которой
изображение или видео прижимается внутри своей области. Берите их вместе с
object-cover или object-none, чтобы при обрезке осталась нужная часть
кадра.
Пример
Точки привязки
Одно и то же изображение в исходном размере (object-none) стоит в
одинаковых областях; класс позиции выбирает видимую часть. Подпись над
образцом — класс позиции.
Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:object-bottom.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
По умолчанию изображение стоит по центру области — это object-center.
Позиция заметна, только когда изображение больше области хотя бы по одной
оси: с object-cover она выбирает, какой край обрезать, с object-none —
какой фрагмент показать.
С префиксом ширины позиция меняется от указанной ширины и шире:
object-center md:object-top.
Ограничения
Несмотря на названия, inline-start и inline-end здесь — физические
стороны: классы задают left и right и не меняются при dir="rtl".
object-inline-start всегда прижимает изображение к левому краю.
Классы действуют на заменяемые элементы (<img>, <video> и подобные).
С object-fill позиция ничего не меняет: изображение занимает всю
область.
