home chevron_right
Фон chevron_right
Размер фона

Размер фонаlink

https://dev.ru.simai.io/ru/ui/utility/background-image/background-size.php

Утилиты background-size управляют масштабированием фонового изображения внутри элемента.

Таблица классов (базовые)link

Класс Значение
.bg-auto background-size: auto;
.bg-cover background-size: cover;
.bg-contain background-size: contain;

Таблица классов (расширенные)link

Класс Значение
.bg-size-0....bg-size-100 background-size: 0%...100%;
.bg-size-a0....bg-size-i9 background-size: var(--sf-a0)...var(--sf-i9);

Описаниеlink

  • bg-auto — фон в исходном размере.
  • bg-cover — фон покрывает весь блок (с возможной обрезкой).
  • bg-contain — фон полностью помещается в блок.
  • bg-size-* — расширенные размеры: проценты и токены size-scale.

Синтаксисlink

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

  • Контрольная точка (необязательный параметр): sm, md, lg, xl.
  • Модификатор (обязательный параметр): один из классов из таблиц выше.

Примеры использованияlink

<div class="bg-cover h-e8" style="background-image:url('/assets/img/simai.svg');"></div>
<div class="bg-size-50 h-e8" style="background-image:url('/assets/img/simai.svg');"></div>
<div class="bg-size-a8 h-e8" style="background-image:url('/assets/img/simai.svg');"></div>

Playgroundlink