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

Класс для придания изображениям гибкости

Так как Bootstrap предназначен для создания адаптивных сайтов, то изображения при построении такой сетки не должны выходить за пределы своего блока (элемента, в который каждое из них помещено).

Чтобы сделать изображения гибкими к ним нужно добавить специальные классы этого фреймворка:

  • img-responsive в Bootstrap 3;
  • img-fluid в Bootstrap 4.

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

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

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

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

При необходимости можно не добавлять этот класс к каждому изображению, а выполнить это с помощью CSS. Для этого нужно в свой файл CSS внести одно из следующих CSS-правил:

/* 1 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались как строчно-блочные элементы (inline-block) */
img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

/* 2 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались на странице как блочные элементы (block) */
img {
  display: block;
  height: auto;
  max-width: 100%;
}

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

/* например, сделаем гибкими только те изображения, которые расположены в элементе с классом main */
.main img {
  display: block;
  height: auto;
  max-width: 100%;
  /* дополнительно их выровняем по центру */
  margin-left: auto;
  margin-right: auto;
  /* и добавим внешний нижний отступ */
  margin-bottom: 15px;
}

При необходимости изображениям можно задать определённый размер. Осуществляется это с помощью стандартных атрибутов width и height:

<!-- Гибкое изображение, имеющее ширину 600 пикселей (Bootstrap 3) -->  
<img src="..." class="img-responsive" width="600">

<!-- Гибкое изображение, имеющее размер 600x800 пикселей (Bootstrap 4) --> 
<img src="..." class="img-fluid" width="600" height="800">

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

Классы для изменения формы изображения и задания тени

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

Классы фреймворка Bootstrap для изменения формы изображения
<!-- 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 для изменения формы изображения
<!-- Bootstrap 4 -->  
<!-- маленький размер тени -->
<img src="..." alt="..." class="shadow-sm">
<!-- средний размер тени -->
<img src="..." alt="..." class="shadow">
<!-- большой размер тени -->
<img src="..." alt="..." class="shadow-lg">

Классы для выравнивания изображений

Изменить положение изображения в Bootstrap можно с помощью утилитных классов:

  • в Bootstrap 3: pull-left, pull-right, center-block, text-left, text-center и text-right;
  • в Bootstrap 4: float-left, float-right, mx-auto d-block, text-left, text-center и text-right.

Первые два класса как в первом, так и во втором списке предназначены для выравнивания изображения посредством задания ему CSS-свойства float со значением left или right.

Классы Bootstrap для выравнивания изображения по левому или правому краю
<!-- Bootstrap 3 -->
<div class="clearfix">
  <!-- выравниваем изображение по левому краю с помощью float: left -->
  <img src="..." alt="..." class="pull-left">
  <!-- выравниваем изображение по правому краю с помощью float: right -->
  <img src="..." alt="..." class="pull-right">
</div>

<!-- Bootstrap 4 -->
<div class="clearfix">
  <!-- выравниваем изображение по левому краю с помощью float: left -->
  <img src="..." alt="..." class="float-left">
  <!-- выравниваем изображение по правому краю с помощью float: right -->
  <img src="..." alt="..." class="float-right">
</div> 

Установка изображению center-block (Bootstrap 3) или mx-auto d-block (Bootstrap 4) предназначено для выравнивания изображения по центру. Эти классы задают изображению блочное отображение, а затем выравнивают его через margin-left: auto и margin-right: auto.

Классы Bootstrap для центрирования изображения
<!-- Bootstrap 3 -->
<img src="..." alt="..." class="center-block">

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

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

<!-- Bootstrap 3 и 4 -->
<!-- по левому краю -->
<div class="text-left">
  <img src="..." alt="...">
</div>
<!-- по центру -->
<div class="text-center">
  <img src="..." alt="...">
</div>
<!-- по правому краю -->
<div class="text-right">
  <img src="..." alt="...">
</div>

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

В этом разделе рассмотрим примеры оформления изображений с помощью CSS.

1. Пример, в котором показано как можно разместить текст поверх изображения.

Оформление изображений – вариант 1
<style>
/* CSS */
.img__container {
  position: relative;
  margin: 20px auto 30px auto;
}

.img__container>img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 6px #9E9E9E;
  border: 4px solid #fff;
}

.img__description {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.img__header {
  font-weight: bold;
  font-size: 1.25em;
}    
</style>

<!-- HTML -->
<div class="img__container">
  <img src="image.png" class="image" alt="Описание изображения...">
  <div class="img__description">
    <div class="img__header">Заголовок для текста</div>
    Текст поверх изображения...
  </div>
</div>

В этом примере для размещения текста поверх изображения используется техника совместного использования относительного и абсолютного позиционирования. Познакомиться с методами позиционирования элементов в CSS можно в этой статье.

2. Рамка для изображения с использованием CSS-свойств border, outline и outline-offset.

Оформление изображений – вариант 2
<style>
/* CSS */
.image {
  display: block;
  margin: 20px auto 30px auto;
  max-width: 100%;
  height: auto;
  margin-bottom: 30px;
  outline: 6px dotted #fff;
  outline-offset: -3px;
  border: 8px solid #eee;
}
</style>

<!-- HTML -->
<img src="image.png" class="image" alt="Описание изображения...">

3. Изображение, стилизованное с использованием CSS-свойств border и box-shadow.

Оформление изображений – вариант 3
<style>
/* CSS */
.image {
  display: block;
  margin: 20px auto 30px auto;
  max-width: 100%;
  height: auto;
  box-shadow: -6px 6px 0 #E0E0E0, -12px 12px 0 #BDBDBD;
  margin-bottom: 30px;
  border: 6px solid #F5F5F5;
}
</style>

<!-- HTML -->
<img src="image.png" class="image" alt="Описание изображения...">

4. Изображение, оформленное с помощью CSS-свойств border и box-shadow.

Оформление изображений – вариант 4
<style>
/* CSS */
.image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto 30px auto;
  border: 5px solid #fff;
  box-shadow: 0 0 10px #9e9e9e;
  border-radius: 4px;
}
</style>

<!-- HTML -->
<img src="image.png" class="image" alt="Описание изображения...">

5. Пример, в котором показана CSS3 техника для установки фонового изображения на весь экран.

Установка фонового изображения на весь экран
/* CSS */
html {
  background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

6. Пример, в котором элементу установим фоновое изображение.

Установка изображения в качестве фона в Bootstrap выполняется средствами CSS. Для этого используется свойство background-image или background.

<style>
/* CSS */
.page-title {
  background-image: url(bg.png);
}
</style>

<!-- HTML -->
<div class="page-title">...</div>

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