Изображения

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

На тази страница

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

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

html

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

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

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

html

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

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

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

html

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

html

<img src="..." class="rounded mx-auto d-block" alt="...">

html

<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:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;