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

• Адаптивность изображения
• Визуальное оформление изображения
• Выравнивание изображений

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

Изображения в Bootstrap делаются «отзывчивыми» с помощью .img-fluid. То есть к картинке применяются свойства max-width: 100% и height: auto которое таким образом масштабируется по родительскому элементу.

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

Пример 1


<img src="..." alt="..." class="img-fluid">

При этом:

В случае если ширина изображения больше ширины элемента в котором оно расположено, то ширина приравнивается к доступной ширине элемента. При этом высота изображения уменьшается пропорционально его ширины.

В случае если ширина изображения меньше ширины элемента в котором оно расположено, то размеры изображения остаются прежними.

Ниже приведены наглядные примеры вышесказанного.

Это изображение с классом img-fluid настоящий размер которого 1200 х 300, кликнув по нему вы можете посмотреть его без применения стилей.

Это изображение с классом img-fluid настоящий размер которого 300 х 300, кликнув по нему вы можете посмотреть его без применения стилей..

Визуальное оформление изображения

В отличии от Bootstrap 3 в Bootstrap 4, этому моменту уделено меньше внимания, с помощью:

• - класса rounded картинку можно сделать с закругленными углами;

  

• - класса img-thumbnail картинку можно заключить в рамку.

  

Выравнивание изображений

Чтобы изменять расположение изображений в Bootstrap 4 выравнивайте их вспомогательными классами выравнивания по стороне (float-left, float-right) или классами выравнивания текста text-left, text-right, text-center. См. пример 2.

Пример 2


<img src="..." class="float-left" alt="...">

---

<img src="..." class="float-right" alt="...">

---

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

---

<div class="text-left">
  <img src="..." class="rounded" alt="...">
</div>

---

<div class="text-right">
  <img src="..." class="rounded" alt="...">
</div>

---

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>