Bootstrap 5 изображений

Содержимое изображений Bootstrap 5 использует различные классы, которые улучшают внешний вид изображения, а также делают его отзывчивым. Создание адаптивного изображения означает, что оно должно масштабироваться в соответствии с его родительским элементом. То есть размер изображения не должен выходить за пределы его родительского элемента и будет увеличиваться и уменьшаться в соответствии с изменением размера его родителя без потери соотношения сторон.

Типы изображений:

• Адаптивные изображения. Адаптивные изображения используются для изменения размера изображений в соответствии с их родительским элементом и размерами экрана. Это означает, что размер изображения не должен выходить за пределы родительского элемента и будет увеличиваться и уменьшаться в соответствии с изменением размера родительского элемента без потери соотношения сторон.
• Миниатюры изображений. Миниатюры изображений используются для добавления закругленной рамки шириной 1 пиксель вокруг изображения. Миниатюра — это изображение небольшого размера, которое представляет собой более крупное изображение.
• Выравнивание изображений: Выравнивание изображений используется для установки выравнивания изображения. Мы будем использовать классы плавающего или текстового выравнивания для установки выравнивания изображений. Мы можем использовать служебный класс .mx-auto margin для центрирования изображений на уровне блоков.
• Picture: изображения Picture используются для установки элемента <picture>, который определяет несколько элементов <source> для определенного <img>.

Пример 1. В этом примере мы создадим адаптивное изображение.

Выход:

Пример 2: В этом примере мы создадим миниатюру изображения.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/content/images/