1. Макет
  2. object-fit

Макет

object-fit

Утилиты для управления тем, как содержимое заменяемого элемента должно изменять размер.

ClassStyles
object-contain
object-fit: contain;
object-cover
object-fit: cover;
object-fill
object-fit: fill;
object-none
object-fit: none;
object-scale-down
object-fit: scale-down;

Примеры

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

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

<img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />

Содержание внутри

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

<img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />

Растягивание для подгонки

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

<img class="h-48 w-96 object-fill ..." src="/img/mountains.jpg" />

Уменьшение масштаба

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

<img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />

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

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

<img class="h-48 w-96 object-none ..." src="/img/mountains.jpg" />

Адаптивный дизайн

Префикс an object-fit утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<img class="object-contain md:object-cover" src="/img/mountains.jpg" />

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков