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