Зображення
Документація та приклади для адаптивної поведінки зображень (щоб вони ніколи не ставали більшими за батьківські елементи) і додавання до них легких стилів — усе через класи.
Чуйні зображення
Зображення в 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;