Изображения
Документация и примери за избиране на изображения в отзивчиво поведение (така че никога да не станат по-широки от родителя си) и добавяне на леки стилове към тях - всичко това чрез класове.
Отзивчиви изображения
Изображенията в Bootstrap са адаптирани с .img-fluid
. Това се отнася max-width: 100%;
и height: auto;
за изображението, така че да се мащабира с родителската ширина.
<img src="..." class="img-fluid" alt="...">
Миниатюри на изображения
В допълнение към нашите помощни програми за радиус на границата , можете да използвате, .img-thumbnail
за да придадете на изображение закръглен вид на граница от 1 пиксел.
<img src="..." class="img-thumbnail" alt="...">
Подравняване на изображения
Подравнете изображенията с помощните плаващи класове или класовете за подравняване на текст . block
изображенията на ниво могат да бъдат центрирани с помощта на .mx-auto
класа за полезност на полето .
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" 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>
дързък
Променливи
Налични са променливи за миниатюри на изображения.
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;