Макет
Утилиты для управления изменением размера содержимого заменяемого элемента.
Измените размер содержимого элемента, чтобы покрыть его контейнер, используя 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">
Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.