Bootstrap 4 Images img картинки
Bootstrap 4 фигуры изображений
Закругленные углы:
Круг:
Миниатюру:
Закругленные углы
.rounded
класс добавляет скругленные углы к изображению:
Пример
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Круг
.rounded-circle
класс формирует изображение в окружность:
Пример
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Миниатюру
.img-thumbnail
класс формирует изображение на миниатюру (обрамление):
Пример
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Выравнивание изображений
Float изображение вправо с .float-right
классом или влево с .float-left
:
Пример
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Центрированное изображение
Центрировать изображение, добавив служебные классы .mx-auto
(Margin: Auto) и .d-block
(Display: Block) к изображению:
Пример
<img src="paris.jpg" class="mx-auto d-block">
Адаптивные образы
Изображения бывают всех размеров. Так что экраны. Адаптивные изображения автоматически корректируются в соответствии с размером экрана.
Создание адаптивных образов путем добавления .img-fluid
класса к <img>
тегу. После этого изображение будет хорошо масштабироваться до родительского элемента.
.img-fluid
класс применяется max-width: 100%;
и height: auto;
к изображению:
Пример
<img class="img-fluid" src="img_chania.jpg" alt="Chania">