Изображения

Документация и примери за избиране на изображения в отзивчиво поведение (така че никога да не стават по-големи от техните родителски елементи) и добавяне на леки стилове към тях - всичко това чрез класове.

Отзивчиви изображения

Изображенията в 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="...">

Подравняване на изображения

Подравнете изображенията с помощните плаващи класове или класовете за подравняване на текст . blockизображенията на ниво могат да бъдат центрирани с помощта на .mx-autoкласа за полезност на полето .

<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>