Подгонка объекта
Утилиты для управления изменением размера содержимого заменяемого элемента.
Contain
Измените размер содержимого элемента, чтобы оно оставалось внутри контейнера, используя .object-contain.
<div class="bg-rose-300 ...">
<img class="object-contain h-48 w-full ...">
</div>
<div class="bg-indigo-300 ...">
<img class="object-cover h-48 w-full ...">
</div>Fill
Растяните содержимое элемента, чтобы оно соответствовало его контейнеру, используя .object-fill.
<div class="bg-light-blue-300 ...">
<img class="object-fill h-48 w-full ...">
</div>None
Отобразить содержимое элемента в исходном размере, игнорируя размер контейнера, используя .object-none.
<div class="bg-yellow-300">
<img class="object-none h-48 w-full ...">
</div>Scale Down
Отобразите содержимое элемента в исходном размере, но при необходимости уменьшите его до размера контейнера, используя .object-scale-down.
<div class="bg-green-300">
<img class="object-scale-down h-48 w-full ...">
</div>Адаптивность
Чтобы контролировать, как содержимое заменяемого элемента должно изменяться только в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите подгонки объекта. Например, добавление класса md:object-scale-down к элементу приведет к применению утилиты object-scale-down при средних размерах экрана и выше.
<div>
<img class="object-contain md:object-scale-down ..." src="...">
</div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
Кастомизация
Варианты
По умолчанию, только responsive варианты создаются для утилит object-fit.
Вы можете контролировать, какие варианты создаются для утилит object-fit для изменения свойства objectFit в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ objectFit: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения object-fit, Вы можете полностью отключить их, установив для objectFit свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ objectFit: false,
}
}