Imagens Responsivas Bootstrap 3

Postado em por Wolmir Cezer Garbin em Front-end | 2359 Visualizações
Última atualização em:

O Bootstrap é um ótimo framework para se trabalhar com sites responsivos, neste post vou mostrar como utilizar imagens responsivas com Bootstrap 3

Todo mundo tem algo para vender, AnuncieOn.com o melhor site de anúncios grátis de todo o Brasil.

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:

CLASSEEXPLICAÇÃO
.img-roundedPara imagens com borda arredondada
.img-circlePara imagens em circulo
.img-thumbnailPara imagens thumbnail
.img-responsivePara 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á:

Exemplo img rounded



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á:

Exemplo img circle



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á:

Exemplo img thumbnail



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á:

Exemplo img responsive



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.


Wolmir Cezer Garbin

Wolmir Cezer Garbin


Sou formado em Desenvolvimento de Sistemas para Internet pela faculdade Mater Dei e Pós graduado em Desenvolvimento de sistemas em Java pela UTFPR. Trabalho a mais de 9 anos com desenvolvimento em Java, Android e Web utilizando as principais tecnologias do mercado. Atuo como professor na faculdade Mater Dei, programador na Garbo Software e criador do Receitas de Código.

Ver mais

FIQUE POR DENTRO

Receba as novidades todo mês em seu e-mail!

Apoiadores


Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar