Картинки и подписи
Картинка в HTML по умолчанию показывается в своём настоящем размере и на телефоне может вылезти за экран. Bootstrap добавляет несколько классов, которые делают картинки адаптивными, оформляют их и подписывают.
Адаптивная картинка
Класс img-fluid задаёт max-width: 100% и height: auto: картинка уменьшается вместе с родителем и сохраняет пропорции.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<img src="/media/photo-800x500.jpg" class="img-fluid" alt="Команда обсуждает план">Картинка шириной 800 пикселей сжалась до ширины превью и не обрезалась. Без img-fluid у окна появилась бы горизонтальная прокрутка.
Оформление
| Класс | Что делает |
|---|---|
img-thumbnail | Белая рамка со скруглением, как у фотографии |
rounded, rounded-circle | Скругление или круг |
float-start, float-end | Обтекание текстом |
d-block mx-auto | Блочная картинка по центру |
object-fit-cover | Заполнить блок с обрезкой краёв |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="d-flex align-items-center gap-3">
<img src="/media/photo-200x200.jpg" class="rounded-circle" width="64" height="64" alt="Анна Смирнова">
<div>
<strong>Анна Смирнова</strong>
<div class="text-body-secondary small">Руководитель проекта</div>
</div>
</div>Круглый аватар 64 на 64 пикселя рядом с именем — так выглядит пользователь в шапке админ-панели или автор отзыва на лендинге.
Картинка с подписью
Для картинки с подписью в HTML есть <figure> и <figcaption>. Bootstrap оформляет их классами figure, figure-img и figure-caption:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<figure class="figure">
<img src="/media/photo-400x250.jpg" class="figure-img img-fluid rounded" alt="Экран с отчётом">
<figcaption class="figure-caption text-center">Отчёт за неделю в Tasko</figcaption>
</figure>Под скруглённой картинкой стоит мелкая серая подпись по центру.
Видео и пропорции
Видео с YouTube вставляется тегом <iframe> и не умеет само сохранять пропорции. Обёртка ratio ratio-16x9 задаёт блоку соотношение сторон 16:9, а <iframe> внутри растягивается на весь блок. Есть также ratio-1x1, ratio-4x3 и ratio-21x9.
Частая ошибка
Писать alt формально — «картинка», «img1» — или не писать вовсе. Программа чтения с экрана озвучит именно этот текст, а при ошибке загрузки он появится вместо картинки. Описывайте, что на ней изображено. Если картинка чисто декоративная, оставьте alt="" пустым, но не удаляйте атрибут.