Изображения в Bootstrap 4

Bootstrap предлагает классы, которые можно использовать при работе с элементом <img>. Большинство из этих служебных классов могут применяться к любому элементу, а не не только к изображениям. Тем не менее, есть класс специально для адаптивных изображений.

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<img src="/example/image/22l.jpg" class="img-fluid" alt="Sample photo">

Bootstrap 4 против Bootstrap 3
Bootstrap 4 использует класс .img-fluid для адаптивных изображений, а Bootstrap 3 использует .img-responsive.

Скруглённые уголки и миниатюры
Вы можете использовать Bootstrap для отображения изображений со скруглёнными уголками или круглых изображений. Это делается с помощью служебных классов .rounded-*.

Вы также можете использовать класс .img-thumbnail, чтобы придать изображению скруглённую рамку в 1 пиксель.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<img src="/example/image/8s.jpg" class="rounded" alt="Sample image">
<img src="/example/image/9s.jpg" class="rounded-circle" alt="Sample image">
<img src="/example/image/10s.jpg" class="img-thumbnail" alt="Sample image">
<img src="/example/image/11s.jpg" class="rounded-top" alt="Sample image">

Служебные классы могут применяться к любому элементу, а не только к изображениям. Классы скругления границ следующие:

rounded
rounded-top
rounded-right
rounded-bottom
rounded-left
rounded-circle
rounded-0
Выравнивание изображения
Вы можете использовать вспомогательные классы для обтекания или классы выравнивания текста для выравнивания изображений по горизонтали.

Обтекание
Используйте классы .float-left, .float-right, .float-*-left и .float-*-right, чтобы сделать обтекание изображения слева или справа. Эти классы размещают элемент слева или справа или отключают обтекание в зависимости от текущего размера области просмотра.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<img src="/example/image/9s.jpg" class="rounded-circle float-left" alt="Sample image">
<img src="/example/image/10s.jpg" class="rounded-circle float-right" alt="Sample image">

Адаптивные классы для выравнивания изображений по левому краю: .float-left, .float-sm-left, .float-md-left, .float-lg-left и .float-xl-left. Адаптивные классы для выравнивания изображений по правому краю: .float-right, .float-sm-right, .float-md-right, .float-lg-right и .float-xl-right. Вы также можете использовать .float-none и различные классы .float-*-none для отключения обтекания.

Центрирование блочных изображений
Используйте .mx-auto одновременно с .d-block для центрирования изображения. Это устанавливает margin: auto.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<img src="/example/image/9m.jpg" class="img-circle mx-auto d-block" alt="Sample photo">

Вы также можете использовать любой из адаптивных классов .mx-*-auto.

Bootstrap 3 использует .center-block для центрирования блочных изображений. Bootstrap 4 для этого использует .mx-auto и .mx-*-auto.

Центрирование не блочных изображений
Вы можете использовать классы .text-center и .text-*-center для родителя изображения, чтобы центрировать не блочное изображение.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="text-center">
<img src="/example/image/9m.jpg" class="img-circle" alt="Sample photo">
</div>

Классы следующие: .text-center, .text-sm-center, .text-md-center, .text-lg-center и .text-xl-center. Вы также можете использовать вспомогательные классы .text-left, .text-right, .text-*-left и .text-*-right.