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

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

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

Используйте утилиту 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">

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