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

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

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

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

Как сделать изображение адаптивным

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

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

Эти классы применяет к изображению 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.

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

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

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

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

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

В Bootstrap 4 для выравния элементов используются следующие классы: float-left, float-right, mx-auto и классы для выравнивания текста (.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 - Изображения (демо)

Примеры оформления изображений

Рассмотрим несколько вариантов оформления изображений на сайте.

Вариант 1. Оформление изображения с помощью рамки, представляющей собой окно браузера в Mac OS (с тремя элементами управления слева).

Bootstrap 3 - Рамка для изображения (вариант 1)
<!-- Bootstrap 3 -->  
  
/* CSS */  
.srcshot {
  position: relative;
  background: #fff;
  border: 2px solid #9e9e9e;
  margin-top: 20px;
  margin-bottom: 20px;
}
.srcshot-header {
  display: flex;
  align-items: center;
  height: 20px;
  background: #9e9e9e;
  border-bottom: 2px solid #9e9e9e;
}
.srcshot-header::after {
  content: "скриншот";
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: #fff;
  margin-left: auto;
  margin-right: 5px;
}
.srcshot-header-btn {
  width: 10px;
  height: 10px;
  background: #fff;
  margin-left: 5px;
  border-radius: 5px;
}
.srcshot-wrapper {
  margin: 5px;
}
@media (min-width: 768px) {
  .srcshot-wrapper {
    margin: 15px;
  }
}
.srcshot-wrapper-item {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

<!-- HTML -->
<div class="srcshot">
  <div class="srcshot-header">
    <div class="srcshot-header-btn"></div>
    <div class="srcshot-header-btn"></div>
    <div class="srcshot-header-btn"></div>
  </div>
  <div class="srcshot-wrapper">
    <img src="image-1.png" alt="" class="srcshot-wrapper-item">
  </div>
</div>

Вариант 2. Рамка для изображения, имеющая вид окна браузера в ОС Windows (с тремя элементами управления справа).

<!-- Bootstrap 3 -->   
  
/* CSS */  
.srcshot {
  position: relative;
  background: #fff;
  border: 2px solid #9e9e9e;
  margin-top: 20px;
  margin-bottom: 20px;
}
.srcshot-header {
  display: flex;
  align-items: center;
  height: 20px;
  background: #9e9e9e;
  border-bottom: 2px solid #9e9e9e;
}
.srcshot-header::before {
  content: "скриншот";
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: #fff;
  margin-left: 5px;
  margin-right: auto;
}
.srcshot-header-btn {
  width: 18px;
  height: 10px;
  background: #fff;
  margin-right: 5px;
}
.srcshot-wrapper {
  margin: 5px;
}
@media (min-width: 768px) {
  .srcshot-wrapper {
    margin: 15px;
  }
}
.srcshot-wrapper-item {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

<!-- HTML -->
<div class="srcshot">
  <div class="srcshot-header">
    <div class="srcshot-header-btn"></div>
    <div class="srcshot-header-btn"></div>
    <div class="srcshot-header-btn"></div>
  </div>
  <div class="srcshot-wrapper">
    <img src="image-1.png" alt="" class="srcshot-wrapper-item">
  </div>
</div>

Вариант 3. Изображение с рамкой и поясняющей надписью «скриншот».

Bootstrap 3 - Рамка для изображения (вариант 3)
<!-- Bootstrap 3 -->   
  
/* CSS */  
.srcshot {
  position: relative;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.srcshot::before {
  content: "скриншот";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 6px 4px;
  color: #616161;
  background: #fff;
  font-size: 12px;
}
.srcshot-dark::before {
  color: #fff;
  background: #616161;      
}
.srcshot-item {
  display: inline-block;
  border: 5px solid #fff;
  box-shadow: 0 0 10px #9e9e9e;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  max-width: 100%;
  height: auto;
}
.srcshot-item-dark {
  border: 5px solid #616161;
}

<!-- HTML -->
<div class="srcshot">
  <img src="image.png" alt="" class="srcshot-item">
</div>

Вариант 4. Изображение с белой рамкой и тенью.

<!-- Bootstrap 3 --> 

/* CSS */  
.img {
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.img-item {
  display: inline-block;
  border: 5px solid #fff;
  box-shadow: 0 0 10px #9e9e9e;
  max-width: 100%;
  height: auto;
}

<!-- HTML -->
<div class="img">
  <img src="image.png" alt="" class="img-item">
</div>