Bootstrap5 Формы изображений
Bootstrap 5 предоставляет множество классов, помогающих быстро настраивать и оптимизировать внешний вид изображений, особенно управление формой, размером и адаптивным макетом изображений.
Закруглённое изображение
.roundedКласс позволяет отображать изображения с эффектом закруглённых углов:
Овальное изображение
.rounded-circleКласс может создавать овальные изображения:
Миниатюра
.img-thumbnailКласс используется для создания миниатюр изображений (у изображений есть границы):
Выравнивание изображений
Используйте.float-startкласс, чтобы выровнять изображения по левому краю, используйте.float-endкласс, чтобы выровнять изображения по правому краю:
Пример
Попробуйте сами »
Центрированное изображение
Используйте.mx-auto (margin:auto)и .d-block (display:block)классы, чтобы центрировать изображения:
Адаптивное изображение
Изображения бывают разных размеров, и нам нужно автоматически адаптироваться в зависимости от размера экрана.
Мы можем добавить<img>класс к.img-fluidтегу, чтобы задать адаптивные изображения.
.img-fluidКласс задаетmax-width: 100%; 、 height: auto; :
Другие расширения