Макет
object-fit
Утилиты для управления тем, как содержимое заменяемого элемента должно изменять размер.
| Class | Styles |
|---|---|
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" />Подробнее об использовании вариантов читайте в документации по вариантам.