Размер маски
mask-size
В SIMAI Framework с помощью модифкаторов можно управлять повтором маски.
Классы
| Класс | Значение |
|---|---|
mask-auto |
mask-size: auto; |
mask-cover |
mask-size: cover; |
mask-contain |
mask-size: contain; |
Описание
Адаптивный модификатор. Задает размер фона в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
mask-auto- для отображения изображения маски в исходном размере;mask-cover- для заполнения изображением маски всей области элемента;mask-contain- для вписывания изображением маски в область элемента;
mask-auto
Используйте модификатор mask-auto для отображения изображения маски в исходном размере.
<div class="mask-auto"></div>mask-cover
Используйте модификатор mask-cover для заполнения изображением маски всей области элемента.
<div class="mask-cover"></div>mask-contain
Используйте модификатор mask-contain для вписывания изображением маски в область элемента.
<div class="mask-contain"></div>Адаптивность
Для управления размером маски, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:mask-cover для покрытия маской области для экранов размером Medium и больше.
<div class="md:mask-cover"></div>Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.