Зображення

Документація та приклади для адаптивної поведінки зображень (щоб вони ніколи не ставали ширшими за батьківське) і додавання до них легких стилів — усе за допомогою класів.

На цій сторінці

Чуйні зображення

Зображення в Bootstrap адаптуються за допомогою .img-fluid. Це стосується max-width: 100%;і height: auto;зображення, щоб воно масштабувалося відповідно до батьківської ширини.

<img src="..." class="img-fluid" alt="...">

Мініатюри зображень

На додаток до наших утиліт радіуса межі , ви можете використовувати .img-thumbnail, щоб надати зображенню округленого вигляду рамки розміром 1 піксель.

<img src="..." class="img-thumbnail" alt="...">

Вирівнювання зображень

Вирівнюйте зображення за допомогою допоміжних класів float або класів вирівнювання тексту . blockЗображення на рівні можна центрувати за допомогою класу .mx-autoкорисності margin .

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Картина

Якщо ви використовуєте <picture>елемент для визначення кількох <source>елементів для певного <img>, обов’язково додайте .img-*класи до тегу , <img>а не до <picture>тегу.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Сасс

Змінні

Змінні доступні для мініатюр зображень.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;