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

object-fit
sm
md
lg
xl

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

Классы

Класс Значение
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;

Описание

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

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • object-contain - меняет размер элемента так чтобы он оставлся в контейнере;
    • object-cover - меняет размер элемента так чтобы он вписался в контейнер;
    • object-fill - меняет размер элемента так чтобы он заполнил контейнер;
    • object-none - отображает в исходном размере;
    • object-scale-down - отображает в исходном размере, но при необходимости уменьшает до размера контейнера;

object-contain

С помощью модификатора object-contain меняет размер элемента так чтобы он оставлся в контейнере.

Picture 
<div class="bg-info ... ">
    <img class="object-contain  h-e4 w-full ... ">
</div>

object-cover

С помощью модификатора object-cover меняет размер элемента так чтобы он вписался в контейнер.

Picture 
<div class="bg-info ... ">
    <img class="object-cover  h-e4 w-full ... ">
</div>

object-fill

С помощью модификатора object-fill меняет размер элемента так чтобы он заполнил контейнер.

Picture 
<div class="bg-info ... ">
    <img class="object-fill  h-e4 w-full ... ">
</div>

object-none

С помощью модификатора object-none отображает в исходном размере.

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

object-scale-down

С помощью модификатора object-scale-down отображает в исходном размере, но при необходимости уменьшает до размера контейнера.

Picture 
<div class="bg-info ... ">
    <img class="object-scale-down  h-e4 w-full ... ">
</div>

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

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

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

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

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

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