Зображення
Документація та приклади для адаптивної поведінки зображень (щоб вони ніколи не ставали більшими за батьківські елементи) і додавання до них легких стилів — усе через класи.
Чуйні зображення
Зображення в Bootstrap адаптуються за допомогою .img-fluid
. max-width: 100%;
і height: auto;
застосовуються до зображення так, щоб воно масштабувалося з батьківським елементом.
<img src="..." class="img-fluid" alt="...">
Зображення SVG і Internet Explorer
В Internet Explorer 10 і 11 зображення SVG мають .img-fluid
непропорційний розмір. Щоб виправити це, додайте width: 100%;
або , .w-100
де необхідно. Це виправлення неправильно визначає розмір інших форматів зображень, тому Bootstrap не застосовує його автоматично.
Мініатюри зображень
На додаток до наших утиліт радіуса межі , ви можете використовувати .img-thumbnail
, щоб надати зображенню округленого вигляду рамки розміром 1 піксель.
<img src="..." class="img-thumbnail" alt="...">
Вирівнювання зображень
Вирівнюйте зображення за допомогою допоміжних класів float або класів вирівнювання тексту . block
Зображення на рівні можна центрувати за допомогою класу .mx-auto
корисності margin .
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" 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>