Изображения
Документация и примеры для настройки изображений для адаптивного поведения (чтобы они никогда не были больше, чем их родительские элементы) и добавление к ним облегченных стилей - все через классы.
Адаптивные изображения
Изображения в Bootstrap сделаны адаптивными с помощью .img-fluid. Это применяет max-width: 100%; и height: auto; к изображению так, чтобы оно масштабировалось с шириной родительского элемента.
<imgsrc="..."class="img-fluid"alt="...">Эскизы изображений
В дополнение к нашим утилитам border-radius Вы можете использовать .img-thumbnail, чтобы придать изображению округлую границу в 1 пиксель.
<imgsrc="..."class="img-thumbnail"alt="...">Выравнивание изображений
Выровняйте изображения по вспомогательным классам с плавающей точкой или классам выравнивания текста. Изображения уровня 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>CSS
Sass переменные
Переменные доступны для миниатюр изображений.
$thumbnail-padding:.25rem;$thumbnail-bg:var(--#{$prefix}body-bg);$thumbnail-border-width:var(--#{$prefix}border-width);$thumbnail-border-color:var(--#{$prefix}border-color);$thumbnail-border-radius:var(--#{$prefix}border-radius);$thumbnail-box-shadow:var(--#{$prefix}box-shadow-sm);