Hoje iremos ver como trabalhar com imagens no Bootstrap, de forma a dar formatos novos, como arredondamento, modo thumbnail e cantos arredondados.
Vamos trabalhar com as seguintes marcações/classes do bootstrap:
Formato da imagem com bootstrap
- .rounded deixa imagens apenas com as pontas arredondadas
- .rounded-circle que deixa imagem arredondada. É útil para exibir fotos de perfil.
- .img-thumbnail Adiciona uma borda e sombra à imagem, criando uma aparência de miniatura. O que é uma thumbnail? Uma thumbnail é uma versão em miniatura de uma imagem. Geralmente é usada para exibir uma prévia menor da imagem original, permitindo que os usuários visualizem rapidamente o conteúdo antes de clicar para ver a imagem completa.
Alinhamento da imagem com bootstrap
Também vamos saber como alinhar as imagens dentro da página usando classes
- .float-start para a imagem flutuar para a esquerda
- .float-end para a imagem flutuar para a direita
- .mx-auto centralizar a imagem
- .d-block
float-leftefloat-right para alinhar a imagem à esquerda ou à direita do contêiner, permitindo o texto fluir ao redor dela.
Responsividade da imagem com bootstrap
Não poderia falar classes para responsividade nas imagens
- .img-fluid a responsividade faz a imagem ter ajustada automaticamente seu tamanho para se adequar ao contêiner pai.
Classes bootstrap para tamanho de imagens
Sabemos que as classes .img-thumbnail diminua o tamanho da imagem fazendo dela uma miniatura e a img-fluid deixa a imagem responsiva fazendo com que ela aumente ou diminua de acordo com o tamanho do contêiner que ela estiver dentro.
Mas há outras classes,
- .img-sm para imagem pequena
- .img-md imagem média
- .img-lg imagem grande
- .img-lx imagem extra grande.
Praticando tratamento de imagens no Bootstrap
Já sabemos, ou deveríamos saber, que a tag HTML que insere imagens na página é a <img>.
A tag do HTML é usada para exibir imagens em uma página da web. Ela possui um atributo obrigatório “src” que especifica o caminho da imagem.
<img src="imagens/muralha.jpeg">
Acima incluo na página o arquivo de imagem muralha.jpeg que está dentro da pasta imagens em meu servidor de hospedagem.
posso colocar essa imagem para ser um thumbnail,
<img src="imagens/muralha.jpeg" class="img-thumbnail" >
podemos transformar a imagem em uma thumbnail arredondada
<img src="imagens/muralha.jpeg" class="img-thumbnail rounded-circle" >
Quando ao tamanho,
<img src="imagem.jpg" class="img-sm" alt="Imagem Pequena"> <img src="imagem.jpg" class="img-md" alt="Imagem Média"> <img src="imagem.jpg" class="img-lg" alt="Imagem Grande">