Утилиты для управления размером фона фонового изображения элемента.
<div class="bg-auto bg-no-repeat bg-center ..." style="background-image: url(...)"></div>Используйте bg-cover, чтобы масштабировать фоновое изображение до тех пор, пока оно не заполнит фоновый слой.
<div class="bg-cover bg-center ..." style="background-image: url(...)"></div>Используйте bg-contain, чтобы масштабировать фоновое изображение до внешних краев без обрезки или растяжения.
<div class="bg-contain bg-center ..." style="background-image: url(...)"></div>Чтобы контролировать размер фонового изображения элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите размера фона. Например, добавление класса md:bg-contain к элементу приведет к применению утилиты bg-contain при средних размерах экрана и выше.
<div class="bg-auto md:bg-contain ..."></div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию Tailwind предоставляет утилиты для размеров фона auto, cover и contain. Вы можете изменить, добавить или удалить их, отредактировав раздел theme.backgroundSize в вашей конфигурации.
// tailwind.config.js
module.exports = {
theme: {
backgroundSize: {
'auto': 'auto',
'cover': 'cover',
'contain': 'contain',
+ '50%': '50%',
+ '16': '4rem',
}
}
}По умолчанию, только responsive варианты создаются для утилит background size.
Вы можете контролировать, какие варианты создаются для утилит background size для изменения свойства backgroundSize в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ backgroundSize: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения background size, Вы можете полностью отключить их, установив для backgroundSize свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ backgroundSize: false,
}
}