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">