Оформление изображений (картинок) в Bootstrap

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

Для того чтобы сделать изображение адаптивным необходимо к тегу <img src="" alt=""> добавить класс img-fluid.

<img src="..." alt="..." class="img-fluid">
  • При этом, если ширина изображения меньше ширины элемента, в котором оно расположено, то размеры изображения остаются прежними.
  • В случае если ширина изображения больше ширины элемента, то ширина приравнивается к доступной ширине элемента. При этом высота изображения уменьшается пропорционально его ширины.

См. пример:

Оформление изображений (картинок) в Bootstrap

1. Изображение с классом img-fluid, размер которого меньше блока в котором оно размещено.

Оформление изображений (картинок) в Bootstrap

2. Тоже самое изображение с классом img-fluid, размер которого больше блока в котором оно размещено.

Изменение формы изображения

С помощью соответствующих классов можно сделать изображение с закруглёнными углами (класс img-rounded), придать ему форму круга1 (класс img-circle) или заключить его в рамку (класс img-thumbnail).

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Оформление изображений (картинок) в Bootstrap
Оформление изображений (картинок) в Bootstrap
Оформление изображений (картинок) в Bootstrap

1 Для того, чтобы изображение было круглым, оно должно иметь одинаковую высоту и ширину.

Изменение расположения изображения

Чтобы изменять расположение изображений в Bootstrap, есть множество способов, например сделав ряд, добавить несколько колонок и в нужную колонку поместить нужное изображение. Однако это способ здесь не рассматривается.

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

Для того чтобы выровнять изображение по центру нужно добавить класс center-block

Оформление изображений (картинок) в Bootstrap
<img src="..." class="img-rounded center-block" alt="...">

Для того чтобы выровнять изображение по правому краю нужно добавить класс pull-right

Оформление изображений (картинок) в Bootstrap

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