Изображения
Документация и примеры для настройки изображений для адаптивного поведения (чтобы они никогда не были больше, чем их родительские элементы) и добавление к ним облегченных стилей - все через классы.
Адаптивные изображения
Изображения в Bootstrap делаются «отзывчивыми» с помощью .img-fluid. Это касается max-width: 100%; и height: auto; применяемых к изображению, которое таким образом масштабируется по родительскому элементу.
<imgsrc="..."class="img-fluid"alt="...">Эскизы изображений
В дополнение к нашим утилитам бордер-радиуса вы можете использовать класс .img-thumbnail для придания изображению границы 1px.
<imgsrc="..."class="img-thumbnail"alt="...">Выравнивание изображений
Выровняйте изображения с помощью вспомогательных классов float или классами выравнивания текста. Блочные изображения block можно центрировать с помощью служебного класса .mx-auto.
<imgsrc="..."class="rounded float-start"alt="..."><imgsrc="..."class="rounded float-end"alt="..."><imgsrc="..."class="rounded mx-auto d-block"alt="..."><divclass="text-center"><imgsrc="..."class="rounded"alt="..."></div>Тэг Picture
Если вы используете элемент <picture> для привязки множественных элементов <source> к определенному <img>, добавьте классы .img-* в <img>, а не в <picture>.
?<picture><sourcesrcset="..."type="image/svg+xml"><imgsrc="..."class="img-fluid img-thumbnail"alt="..."></picture>Sass
Переменные
Переменные доступны для миниатюр изображений.
$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;
