Оформление изображений (картинок) в 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, кликнув по нему вы можете посмотреть его без применения стилей.

Картинка 2. Оформление изображений (картинок) в Bootstrap
Ширина больше элемента

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

Картинка 2. Оформление изображений (картинок) в Bootstrap 4
Ширина меньше элемента

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

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

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

    Картинка 3. Оформление изображений (картинок) в Bootstrap 4
    Картинка с классом rounded
  • - класса img-thumbnail картинку можно заключить в рамку.

    Картинка 4. Оформление изображений (картинок) в Bootstrap 4
    Картинка с классом 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>

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

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

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