Изображения Bootstrap 5

Рекомендуем курсы:

Форма изображения

Угол .rounded

Пример

Класс .rounded добавляет изображению закругленные углы:

Попробуйте сами

<img src="flower.jpg" class="rounded" alt="Flower">

Круг .rounded-circle

Пример

Класс .rounded-circle будет формировать изображение в виде круга:

Попробуйте сами

<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">

Миниатюра .img-thumbnail

Пример

Класс .img-thumbnail будет формировать изображение в виде миниатюры (с рамкой):

Попробуйте сами

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">

Для выравнивания изображений .float-start Класс .float-start будет перемещать изображение влево, или использовать .float-end Плавающее в правую сторону:

Пример

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">

Попробуйте сами

Центрированные изображения

Чтобы сделать изображение центрированным, мы добавили класс utility к изображению .mx-auto (margin:auto) и .d-block (display:block):

Пример

<img src="tulip.jpg" class="mx-auto d-block">

Попробуйте сами

Адаптивные изображения

Изображения имеют различные размеры. Экраны также. Адаптивные изображения автоматически настраиваются под размер экрана.

Через .img-fluid Добавьте класс <img> Используйте тег для создания адаптивных изображений. Затем изображение будет хорошо масштабироваться внутри родительского элемента.

.img-fluid Классы для применения изображений max-width: 100%; и height: auto; :

Пример

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

Попробуйте сами