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

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

Адаптивные изображения

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

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

Скруглённые уголки и миниатюры

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

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

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

• rounded
• rounded-top
• rounded-right
• rounded-bottom
• rounded-left
• rounded-circle
• rounded-0

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

Вы можете использовать вспомогательные классы для обтекания или классы выравнивания текста для выравнивания изображений по горизонтали.

Обтекание

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

Адаптивные классы для выравнивания изображений по левому краю: .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.

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

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

Центрирование не блочных изображений

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

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