Bootstrap 4 Imagens
Bootstrap 4 Formas de Imagem
Cantos arredondados:
Círculo:
Miniatura:
Cantos arredondados
A .roundedclasse adiciona cantos arredondados a uma imagem:
Exemplo
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Círculo
A .rounded-circleturma molda a imagem em um círculo:
Exemplo
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Miniatura
A .img-thumbnailclasse molda a imagem em uma miniatura (com borda):
Exemplo
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Alinhando imagens
Flutue uma imagem para a direita com a .float-rightclasse ou para a esquerda com .float-left:
Exemplo
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Imagem centralizada
Centralize uma imagem adicionando as classes utilitárias .mx-auto(margin:auto) e .d-block(display:block) à imagem:
Exemplo
<img src="paris.jpg" class="mx-auto d-block">
Imagens responsivas
As imagens vêm em todos os tamanhos. Assim como as telas. As imagens responsivas se ajustam automaticamente ao tamanho da tela.
Crie imagens responsivas adicionando uma .img-fluidclasse à <img>tag. A imagem será então dimensionada bem para o elemento pai.
A .img-fluidclasse se aplica max-width: 100%;e
height: auto;à imagem:
Exemplo
<img class="img-fluid" src="img_chania.jpg" alt="Chania">