Imagens Responsivas Bootstrap 3
O Bootstrap é um ótimo framework para se trabalhar com sites responsivos, neste post vou mostrar como utilizar imagens responsivas com Bootstrap 3
por Wolmir Cezer Garbin - - Front-end - TUTORIAL Última atualização em: | 15317 Visualizações
Se você está utilizando o Bootstrap em suas páginas e tem imagens que não se ajustam ao layout, então este post vai te ajudar.
Bootstrap CSS Images
O Bootstrap possúi algumas classes que te ajudaram a ajustar as imagens em seu layout, são elas:
| CLASSE | EXPLICAÇÃO |
|---|---|
| .img-rounded | Para imagens com borda arredondada |
| .img-circle | Para imagens em circulo |
| .img-thumbnail | Para imagens thumbnail |
| .img-responsive | Para imagens responsivas |
Para entender melhor, vamos analizar cada uma delas.
Image rounded Bootstrap (.img-rounded)
Esta classe é utilizada para adicionar cantos arredondados em uma imagem.
Note que esta classe não funciona no IE8
Exemplo de utilização:
<img src="receitasdecodigo.jpg" class="img-rounded" alt="Receitas de Código">
Para este exemplo o resultado será:
Image circle Bootstrap (.img-circle)
Esta classe é utilizada para mostrar a imagem em forma de circulo.
Note que esta classe não funciona no IE8
Exemplo de utilização:
<img src="receitasdecodigo.jpg" class="img-circle" alt="Receitas de Código" width="100" height="100">
Para este exemplo o resultado será:
Image thumbnail Bootstrap (.img-thumbnail)
Esta classe é utilizada para imagens em miniaturas.
Exemplo de utilização:
<img src="receitasdecodigo.jpg" class="img-thumbnail" alt="Receitas de Código">
Para este exemplo o resultado será:
Image responsive Bootstrap (.img-responsive)
Esta classe é utilizada para tornar as imagens responsivas, ou seja, a imagem ira se adequar ao elemento pai conforme seu tamanho.
Exemplo de utilização:
<img src="receitasdecodigo.jpg" class="img-responsive" alt="Receitas de Código">
Para este exemplo o resultado será:
Imagens responsivas sem Bootstrap
A classe .img-responsive aplica a max-width: 100%, height: auto, e display:block para a imagem, dessa forma se você não quer adicionar o Bootstrap ao seu projeto, você pode utilizar o seguinte código css para deixar suas imagens responsivas:
.img-responsive {
max-width: 100%;
height: auto;
display:block;
}
Pronto, agora você terá o mesmo efeito de imagem responsiva obtido com o bootstrap.
Se ficou com dúvidas, posta nos comentários.
Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.
