Подгонка объекта

​

Основы использования

​

Изменение размера для покрытия контейнера

Измените размер содержимого элемента, чтобы покрыть его контейнер, используя object-cover.

<div class="bg-indigo-300 ...">
  <img class="object-cover h-48 w-96 ...">
</div>

​

Содержит элемент

Измените размер содержимого элемента, чтобы оно оставалось внутри его контейнера, используя object-contain.

<div class="bg-purple-300 ...">
  <img class="object-contain h-48 w-96 ...">
</div>

​

Растяжка до размера контейнера

Растяните содержимое элемента, чтобы оно соответствовало его контейнеру, используя object-fill.

<div class="bg-sky-300 ...">
  <img class="object-fill h-48 w-96 ...">
</div>

​

Уменьшение, если слишком большое

Отобразите содержимое элемента в его исходном размере, но при необходимости уменьшите его, чтобы он соответствовал его контейнеру, используя object-scale-down.

<div class="bg-cyan-300">
  <img class="object-scale-down h-48 w-96 ...">
</div>

​

Использование исходного размера элемента

Отображать содержимое элемента в исходном размере, игнорируя размер контейнера, используя object-none.

<div class="bg-yellow-300">
  <img class="object-none h-48 w-96 ...">
</div>

---

​

Применяя условно

​

Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:object-scale-down, чтобы применять утилиту object-scale-down только при hover.

<img class="object-contain hover:object-scale-down">

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:object-scale-down, чтобы применить утилиту object-scale-down только на экранах среднего размера и выше.

<img class="object-contain md:object-scale-down">

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.