Source

Зображення

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

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

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

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
Зображення SVG та IE 10

В Internet Explorer 10 зображення SVG мають .img-fluidнепропорційний розмір. Щоб виправити це, додайте, width: 100% \9;де потрібно. Це виправлення неправильно визначає розмір інших форматів зображень, тому Bootstrap не застосовує його автоматично.

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

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

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<img src="..." alt="..." class="img-thumbnail">

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

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

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<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>