Bootstrap 3 Bootstrap 4

Статья в которой рассматриваются классы, которые предоставляет платформа Twitter Bootstrap 3 и 4, для работы с изображениями.

Адаптивное изображение - это изображение, которое подстраивается под ширину элемента, в котором оно расположено.

Т.е. оно отвечает следующим условиям:

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

Придание изображению адаптивности осуществляется:

  • в Twitter Bootstrap 3 посредством добавления класса .img-responsive к тегу img.
  • в Twitter Bootstrap 4 посредством добавления класса .img-fluid к тегу img.

Эти классы применяет к изображению CSS свойства max-width:100% и height:auto.

<!-- Bootstrap 3 -->  
<img src="..." class="img-responsive">

<!-- Bootstrap 4 -->  
<img src="..." class="img-fluid">

Если необходимо сделать адаптивными сразу все изображения, расположенные на странице или в некотором блоке, то для этого необходимо воспользоваться одним из нижепредставленных правил CSS:

/* 1 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как строчно-блочные элементы (inline-block) */
img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}
/* 2 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как блочные элементы (block) */
img {
  display: block;
  height: auto;
  max-width: 100%;
}
/* 3 Способ - Придать адаптивность всем изображениям, расположенных в элементе с id="main". При этом данные изображения будут себя ввести как блочные элементы (block) */
#main img {
  display: block;
  height: auto;
  max-width: 100%;
}

Данное правило необходимо добавить в CSS файл, который должен быть подключен после файла bootstrap.css.

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

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Bootstrap 4 - Формы изображений

Изменить расположение изображения в Twitter Bootstrap можно с помощью вспомогательных классов float (.pull-left и .pull-right), класса .center-block и классов для выравнивания текста (.text-left, .text-center и .text-right).

Внимание:
Классы .pull-left, .pull-right и .center-block могут применяться для выравнивания изображений, которые ведут себя как блочные (block) или строчно-блочные (inline-block) элементы. После их применения изображения становится блочными.
Классы .text-left, .text-center и .text-right могут быть использованы только для изменения расположения изображений, которые ведут себя как строчно-блочные (inline-block) элементы.

Например, для того чтобы расположить изображение по левому краю к нему необходимо добавить класс .pull-left:

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

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

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

Bootstrap 4 - Выравнивание изображения

Например, для того чтобы выровнять изображение по центру к нему необходимо добавить класс .center-block или поместить его в контейнер div с классом .text-center:

<!--1 Способ. Добавить к изображению класс .center-block-->
<!--Применяется для центрирования изображений, которые ведут себя как блочные (block) или строчно-блочные (inline-block) элементы-->
<!--После применения данного класса изображение становится блочным (display:block)-->
<img src="..." class="img-rounded center-block" alt="...">

Bootstrap 4 - Центрирование изображения

<!--2 Способ. Поместить изображение в элемент div, который имеет класс .text-center-->
<!--Применяется для центрирования изображений, которые ведут себя как строчно-блочные (inline-block) элементы-->
<div class="text-center">
  <img src="..." class="img-rounded" alt="...">
</div>

Bootstrap 4 - Изображения (демо)