Изображения
Документация и примери за избиране на изображения в отзивчиво поведение (така че никога да не стават по-големи от техните родителски елементи) и добавяне на леки стилове към тях - всичко това чрез класове.
Отзивчиви изображения
Изображенията в 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>