Imagens Responsivas Bootstrap 3

Postado em por Wolmir Cezer Garbin em Front-end | 194 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

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.

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

Posts relacionados


Markdown é uma ferramenta de conversão de texto para HTML. Com ele é possível você marcar títulos, listas, tabelas de forma limpa, legível e precisa.

Ler mais

Em aplicações web, principalmente quando criadas em single pages, é necessário armazenar informações no próprio browser, o localStorage nos permite fazer isso.

Ler mais

Markdown é uma ferramenta de conversão de texto para HTML. Com markdown é possível marcar títulos, listas, tabelas, taragrafos, códigos e muito mais de forma limpa e legível.

Ler mais

Code Conference

Esta é uma conferência de código realizada na cidade de Pato Branco para dissiminar tendências e informações sobre programação e novas tecnológias

Veja mais sobre o Code Conference

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