Краткая справка

Класс
Свойства
object-containobject-fit: contain;
object-coverobject-fit: cover;
object-fillobject-fit: fill;
object-noneobject-fit: none;
object-scale-downobject-fit: scale-down;

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

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

Измените размер содержимого элемента, чтобы закрыть его контейнер, используя .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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:object-scale-down to only apply the object-scale-down utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

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

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:object-scale-down to apply the object-scale-down utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.