Изображения

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

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

Изображенията в Bootstrap са адаптирани с .img-fluid. max-width: 100%;и height: auto;се прилагат към изображението, така че да се мащабира с родителския елемент.

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

SVG изображения и IE 10

В Internet Explorer 10 SVG изображенията .img-fluidса с непропорционален размер. За да коригирате това, добавете, width: 100% \9;където е необходимо. Тази корекция неправилно оразмерява други формати на изображения, така че Bootstrap не я прилага автоматично.

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

В допълнение към нашите помощни програми за радиус на границата , можете да използвате, .img-thumbnailза да придадете на изображение закръглен вид на граница от 1 пиксел.

Общо квадратно заместващо изображение с бяла рамка около него, което го прави да прилича на снимка, направена със стар фотоапарат за мигновени снимки

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

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

Подравнете изображенията с помощните плаващи класове или класовете за подравняване на текст . 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>