Размер фона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

Адаптивный модификатор background-size позволяет контролировать размер фонового изображения в зависимости от ширины экрана (при помощи контрольных точек):

  • bg-auto — фоновое изображение отображается в исходном размере, не растягиваясь и не уменьшаясь.
  • bg-cover — фоновое изображение будет масштабироваться, чтобы полностью покрыть область элемента, возможно обрезаясь.
  • bg-contain — фоновое изображение будет масштабироваться так, чтобы полностью вписаться в область элемента, без обрезания, но с возможными пустыми полями.

Синтаксисlink

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

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

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

<!-- Фоновое изображение в исходном размере -->
<div class="bg-auto w-full h-e8" style="background-image:url('../../../image/picture.svg');"></div>

<!-- Фоновое изображение покрывает весь элемент -->
<div class="bg-cover w-full h-e8" style="background-image:url('../../../image/picture.svg');"></div>

<!-- Фоновое изображение вписано в элемент -->
<div class="bg-contain w-full h-e8" style="background-image:url('../../../image/picture.svg');"></div>

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

Для изменения размера фонового изображения, начиная с определенного размера экрана, добавьте префикс контрольной точки:

<!-- Для экранов от Medium и больше фоновое изображение будет покрывать весь элемент -->
<div class="md:bg-cover w-full h-e8" style="background-image:url('../../../image/picture.svg');"></div>