Bootstrap Images (изображения)

Изображения играют важную роль в веб-разработке, делая контент более привлекательным и информативным. В Bootstrap 5 есть несколько классов, которые помогут вам работать с изображениями, делая их отзывчивыми и стильными. Рассмотрим, как использовать эти инструменты.

Responsive Image (aдаптивные изображения)

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

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

<img src="..." class="img-fluid" alt="...">

Результат:

Thumbnails - эскизы (миниатюры) изображений

Для создания миниатюр изображений с закругленными углами используйте класс .img-thumbnail. Он добавляет 1-пиксельную границу и делает изображение более компактным. Пример:

<img src="..." class="img-thumbnail" alt="...">

Результат:

Rounded images (закругление изображений)

Для закругления изображений можно воспользоваться утилитами border-radius.

<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-right" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-left" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
<img src="..." class="rounded-0" alt="...">

Результат:

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

Изображения можно выравнивать с помощью вспомогательных классов float или классов выравнивания текста.

Выравнивание по левому краю:

<img src="..." class="rounded float-left" alt="...">

Результат:

Выравнивание по правому краю:

<img src="..." class="rounded float-end" alt="...">

Результат:

Центрирование:

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Результат:

Так же изображения можно центрировать с помощью класса d-block в паре с классом .mx-auto.

<img src="..." class="rounded mx-auto d-block" alt="...">

Результат:

Использование элемента picture

Если вы используете элемент <picture> для указания нескольких <source> для конкретного <img>, убедитесь, что классы .img-* применяются к самому <img>, а не к тегу <picture>.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Добавление изображения с подписью

Изображения в веб-разработке часто нуждаются в подписях, чтобы обеспечить дополнительную информацию или контекст. В Bootstrap 5 вы можете легко добавить изображение с подписью, используя компонент <figure>.

Использование figure и figcaption

Добавьте изображение с помощью тега <img>. Обязательно примените класс .img-fluid, чтобы сделать его адаптивным:
```
<img src="..." class="img-fluid" alt="...">
```
Оберните изображение в <figure>. Этот тег представляет собой контейнер для связанных элементов, таких как изображение и подпись:
```
<figure class="figure">
  <img src="..." class="img-fluid" alt="...">
</figure>
```

Добавьте подпись с помощью тега <figcaption> внутри <figure>:

<figure class="figure">
  <img src="..." class="img-fluid" alt="...">
  <figcaption class="figure-caption">Подпись к изображению</figcaption>
</figure>

Выравнивание подписи

Чтобы выровнять подпись, используйте текстовые утилиты Bootstrap. Например, чтобы выровнять подпись по правому краю:

<figure class="figure">
  <img src="..." class="img-fluid" alt="...">
  <figcaption class="figure-caption text-end">Подпись к изображению</figcaption>
</figure>

FAQ (ответы на часто задаваемые вопросы)

Как задать конкретный размер изображения bootstrap 5

Если вам нужно явно указать размеры изображения, вы можете использовать атрибуты width и height в пикселях. Например:

<img src="путь_к_изображению.jpg" class="img-fluid" alt="bootstrap image size" width="500" height="300">

Как выровнять изображение по левому краю?

Примените класс .rounded и .float-start.

Как выровнять изображение по правому краю?

Используйте .rounded и .float-end.

Как центрировать изображение?

Добавьте .rounded, .mx-auto и .d-block.

Как использовать элемент <picture> для изображений?

Укажите разные <source> внутри <picture>, а классы .img-* применяйте к <img>.

Как сделать обтекание картинки текстом в bootstrap

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

Используйте класс img-fluid, который задает следующие стили: max-width: 100%; height: auto; в паре с классом float-end, чтобы картинка была прижата к правой стороне и обтекала текстом слева

<img src="https://via.placeholder.com/200x200" class="img-fluid float-end" alt="..." />
<p>Текст, который обтекает картинку...</p>
<p>Текст, который обтекает картинку...</p>
<p>Текст, который обтекает картинку...</p>

Результат:

Текст, который обтекает картинку...

Или в паре с классом float-start, чтобы картинка была прижата к левой стороне и обтекала текстом справа.

<img src="https://via.placeholder.com/200x200" class="img-fluid float-start" alt="..." />
<p>Текст, который обтекает картинку...</p>
<p>Текст, который обтекает картинку...</p>
<p>Текст, который обтекает картинку...</p>

Результат:

Текст, который обтекает картинку...

Как сделать увеличение картинки при наведении bootstrap

Чтобы увеличить изображение при наведении, используйте свойство transform:

.img-fluid:hover {
  transform: scale(1.2);
}

Это увеличит изображение на 20% с сохранением пропорций.

Как сделать изображение круглым?

Примените класс .rounded.

Как добавить изображение с подписью?

Используйте тег <figure> и <figcaption> для добавления подписи к изображению.

Как сделать ссылку с картинкой в bootstrap

Поместите тег <img> внутрь тега <a>, указав адрес изображения в атрибуте src и адрес ссылки в атрибуте href:

<a href="адрес_ссылки"><img src="адрес_изображения" alt="ссылка картинка bootstrap"></a>

Заключение

Теперь вы знаете, как добавить изображение с подписью в Bootstrap 5. Используйте <figure> и <figcaption>, чтобы создать стильные и информативные изображения на вашем сайте.

На этой странице