Bootstrap 4 изображения
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-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">