Положение объекта
Утилиты для управления тем, как содержимое заменяемого элемента должно располагаться в его контейнере.
Использование
Используйте утилиты object-{side}, чтобы указать, как содержимое заменяемого элемента должно располагаться в его контейнере.
Слева Вверху
Вверху
Справа Вверху
Слева
По центру
Справа
Слева Внизу
Внизу
Справа Внизу
<img class="object-none object-left-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right-top bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-left bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-center bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-left-bottom bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-bottom bg-yellow-300 w-24 h-24 ..." src="...">
<img class="object-none object-right-bottom bg-yellow-300 w-24 h-24 ..." src="...">Адаптивность
Чтобы разместить объект только в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите позиционирования объекта. Например, добавление класса md:object-top к элементу приведет к применению утилиты object-top при средних размерах экрана и выше.
<img class="object-center md:object-top ..." src="...">Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
Кастомизация
Позиционирование объекта
По умолчанию Tailwind предоставляет девять утилит для позиционирования объектов. Вы можете изменить, добавить или удалить их, отредактировав раздел theme.objectPosition в Вашей конфигурации Tailwind.
// tailwind.config.js
module.exports = {
theme: {
objectPosition: {
bottom: 'bottom',
center: 'center',
left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
right: 'right',
'right-bottom': 'right bottom',
'right-top': 'right top',
top: 'top',
+ 'center-bottom': 'center bottom'
+ 'center-top': 'center top',
}
}
}Варианты
По умолчанию, только responsive варианты создаются для утилит object position.
Вы можете контролировать, какие варианты создаются для утилит object position для изменения свойства objectPosition в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ objectPosition: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения object position, Вы можете полностью отключить их, установив для objectPosition свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ objectPosition: false,
}
}