Bootstrap предлагает классы, которые можно использовать при работе с элементом <img>. Большинство из них являются служебными классами, которые можно применять к любому элементу, а не только к изображениям. Однако есть класс, специально предназначенный для адаптивных изображений.
Адаптивные изображения
Bootstrap предлагает класс .img-fluid, который позволяет сделать изображение соответствующим образом масштабируемым на разных устройствах. Данный класс применяет к изображению max-width: 100% и height: auto. Это гарантирует, что изображение будет масштабироваться в соответствии с родительским элементом.
Чтобы увидеть масштабирование следующего изображения, откройте просмотр в новом окне, а затем измените размер браузера.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<img src="image/22l.jpg" class="img-fluid" alt="Пример фотографии">
Скруглённые уголки и эскизы
Вы можете использовать Bootstrap для отображения изображений со скруглёнными уголками или в виде круга. Это достигается с помощью классов .rounded-*.
Вы также можете использовать класс .img-thumbnail, чтобы добавить к изображению скруглённую однопиксельную рамку.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style><img src="image/8s.jpg" class="rounded" alt="Пример изображения">
<img src="image/9s.jpg" class="rounded-circle" alt="Пример изображения">
<img src="image/10s.jpg" class="img-thumbnail" alt="Пример изображения">
<img src="image/11s.jpg" class="rounded-top" alt="Пример изображения">
Служебные классы можно применять к любому элементу, а не только к изображениям. Классы для создания скругленных элементов:
- .rounded
- .rounded-top
- .rounded-end
- .rounded-bottom
- .rounded-start
- .rounded-circle
- .rounded-pill
Выравнивание изображения
Вы можете использовать либо вспомогательные классы для выравнивания изображений по горизонтали.
Используйте классы .float-start, .float-end и .float-*-*, чтобы сместить изображение влево или вправо. Эти классы перемещают элемент влево или вправо или отключают обтекание в зависимости от текущего размера области просмотра.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<img src="image/9s.jpg" class="rounded-circle float-start" alt="Пример изображения">
<img src="image/10s.jpg" class="rounded-circle float-end" alt="Пример изображения">
Вспомогательные адаптивные классы:
- .float-start
- .float-end
- .float-none
- .float-sm-start
- .float-sm-end
- .float-sm-none
- .float-md-start
- .float-md-end
- .float-md-none
- .float-lg-start
- .float-lg-end
- .float-lg-none
- .float-xl-start
- .float-xl-end
- .float-xl-none
- .float-xxl-start
- .float-xxl-end
- .float-xxl-none
Классы .float-none и .float-*-none отключают обтекание.
Центрирование блочных изображений
Используйте класс .mx-auto для центрирования изображения с добавлением .d-block. При этом устанавливается значение margin: auto.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<img src="image/9m.jpg" class="img-circle mx-auto d-block" alt="Пример фотографии">
Вы также можете использовать любой из адаптивных классов .mx-*-auto.
Центрирование не блочных изображений
Вы можете использовать класс .text-center на родительском изображении, чтобы выровнять по центру не блочное изображение.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="text-center">
<img src="image/9m.jpg" class="img-circle" alt="Пример фотографии">
</div>
Дополнительную информацию о выравнивании текста смотрите в документации Bootstrap 5.