Заполнение объектом

object-position
sm
md
lg
xl

В SIMAI Framework с помощью модификатора можно управлять положением оъекта в контейнере.

Классы

Класс Значение
object-bottom object-position: bottom;
object-center object-position: text-center;
object-left object-position: left;
object-left-bottom object-position: left-bottom;
object-left-top object-position: left-top;
object-right object-position: right;
object-right-bottom object-position: right-bottom;
object-right-top object-position: right-top;
object-top object-position: top;

Описание

Адаптивный модификатор. Позволяет управлять управлять положением оъекта в контейнере, в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • object-bottom - распалогает объект снизу;
    • object-center - распалогает объект по центру;
    • object-left - распалогает объект слева;
    • object-left-bottom - распалогает объект слева снизу;
    • object-left-top - распалогает объект слева сверху;
    • object-right - распалогает объект справа;
    • object-right-bottom - распалогает объект справа снизу;
    • object-right-top - распалогает объект справа сверху;
    • object-top - распалогает объект сверху;

object-bottom

С помощью модификатора object-bottom распалогает объект снизу.

Picture 
<div class="bg-primary-container... ">
    <img class="object-bottom object-none h-e4 w-full ... ">
</div>

object-center

С помощью модификатора object-center распалогает объект по центру.

Picture 
<div class="bg-primary-container... ">
    <img class="object-center object-none h-e4 w-full ... ">
</div>

object-left

С помощью модификатора object-left распалогает объект слева.

Picture 
<div class="bg-primary-container... ">
    <img class="object-left object-none h-e4 w-full ... ">
</div>

object-left-bottom

С помощью модификатора object-left-bottom распалогает объект слева снизу.

Picture 
<div class="bg-primary-container... ">
    <img class="object-left-bottom object-none h-e4 w-full ... ">
</div>

object-left-top

С помощью модификатора object-left-top распалогает объект слева сверху.

Picture 
<div class="bg-primary-container... ">
    <img class="object-left-top object-none h-e4 w-full ... ">
</div>

object-right

С помощью модификатора object-right распалогает объект справа.

Picture 
<div class="bg-primary-container... ">
    <img class="object-right object-none h-e4 w-full ... ">
</div>

object-right-bottom

С помощью модификатора object-right-bottom распалогает объект справа снизу.

Picture 
<div class="bg-primary-container... ">
    <img class="object-right-bottom object-none h-e4 w-full ... ">
</div>

object-right-top

С помощью модификатора object-right-top распалогает объект справа сверху.

Picture 
<div class="bg-primary-container... ">
    <img class="object-right-top object-none h-e4 w-full ... ">
</div>

object-top

С помощью модификатора object-top распалогает объект сверху.

Picture 
<div class="bg-primary-container... ">
    <img class="object-top object-none h-e4 w-full ... ">
</div>

Адаптивность

Для управления положением оъекта в контейнере, начиная с определенного размера области просмотра, добавьте к модификатору префикс контрольной точки (sm, md, lg, xl) через двоеточие (:).

Например, используйте модификатор md:object-center для размещения объекта в центре для экранов размером Medium и больше.

<div class="md:object-center"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью