Bootstrap 3: Criando Imagens Responsivas

Neste tutorial, vamos ver como trabalhar com imagens responsivas no Bootstrap 3.

Primeiramente, você vai aprender a classe que torna as imagens responsivas. Depois algumas classes que modificam o formato da imagem, como criar miniaturas e, finalmente, como usar o media object para criar listas com imagens em destaque.

Você pode ver os demos no link abaixo (e também o código completo):

Demo | Código-fonte


Imagens Responsivas

Qualquer imagem, no Bootstrap 3, pode ficar responsiva quando você adiciona a classe .img-responsive.

Essa classe modifica a largura máxima e a altura da imagem – e com isso ela consegue se ajustar ao layout.

A marcação, então, fica mais ou menos assim:

<img src="..." class="img-responsive" alt="...">

A classe .img-responsive é definida pelo Bootstrap, mas você pode adicionar outras classes e estilos próprios, também.

Vale ressaltar que a imagem vai ficar limitada, com o tamanho do elemento em que ela estiver contida:

<div class="col-md-6">
  <img src="featured.jpg" class="img-responsive" alt="Imagem Responsiva">
</div>

Neste exemplo você pôde ver que a imagem está dentro de uma div.col-md-6. Logo ela ocupará a metade do grid do Bootstrap.


Imagens com Cantos Arredondados

Você pode adicionar outras classes a uma tag <img> responsiva para modificar o formato da imagem.

A classe .img-rounded, por exemplo, adiciona cantos arredondados na imagem:

<img src="..." alt="..." class="img-rounded">

De uma forma parecida, temos a classe .img-circle que transforma a imagem em um círculo:

<img src="..." alt="..." class="img-circle">

Já a classe .img-thumbnail modifica a imagem com estilos de miniatura:

<img src="..." alt="..." class="img-thumbnail">

É possível usar estas classes junto com a classe .img-responsive, sem problemas:

<img src="..." alt="..." class="img-responsive img-rounded">

Isso é muito útil para catálogos e galerias de imagens, antes de exibir a imagem em tamanho original, ou até mesmo para listas com miniaturas.

Pode ser que você precise definir a altura e largura da imagem nestes casos. Mas, se você usar corretamente o o grid system, os tamanhos vão ficar proporcionais.

Por outro lado, é uma boa prática definir na marcação os tamanhos de cada imagem. Então, eu sugiro que você sempre coloque os estilos para min-width e min-heigth para as suas imagens, mesmo usando a classe .img-responsive.


Já que falamos de galerias, existe um componente no Bootstrap chamado Thumbnails, que permite melhorar o grid system para exibir imagens, vídeos, textos e outros itens em formato tabular.

Ou seja, é perfeito para galerias e catálogos.

Para fazer isso, você deve usar a classe .thumbnail no elemento que contém a imagem:

<div class="thumbnail">
 <img src="placeholder.jpg" alt="Imagem como Thumbnail">
 <div class="caption">
   <p>Legenda da Foto</p>
 </div>
</div>

Logo depois da imagem, você vê que tem uma div com a classe .caption. Esta classe permite criar legendas para a imagem que foi definida. Esse item é opcional.

Além de criar legendas, a .caption permite colocar qualquer outro componente visual do Bootstrap, como botões, painéis, títulos e textos, que podem ser úteis dependendo do seu design visual.

A diferença entre a classe .thumbnail e a anterior, .img-thumbnail, é justamente a de permitir adicionar outros itens junto à imagem, como se fossem propriedades ou complementos dela.


Imagens de Destaque com Media Object

Esse é, sem dúvida, o componente de imagem mais interessante do Bootstrap.

O Media Object permite criar estilos para a construção de vários tipos de componentes (como comentários em blogs, tweets, etc) que apresentam a imagem à esquerda ou alinhado à direita do conteúdo.

É extremamente útil para listagem de notícias, ou artigos, por exemplo.

Vamos ver como fica a marcação:

<div id="news-list" class="col-xs-8">
 <div class="media">
   <a class="media-left" href="#">
     <img alt="150x100" width="150" height="100" src="placeholder.jpg">
   </a>
   <div class="media-body">
     <h4 class="media-heading">Titulo da Notícia</h4>
     <p> ... </p>
   </div>
 </div>
  ...
</div>

Este exemplo mostra como criar uma lista de notícias, com a imagem de destaque à esquerda.

Logo depois, você vê a classe .media-body que nada mais é do que o resumo da notícia (mas poderia ser um comentário, por exemplo).

Para cada item da lista, você deve criar uma div com a classe .media (neste exemplo, cada div.media é uma notícia).

Você poderia obter o mesmo resultado trabalhando com classes de coluna (.col-md-*), porém as proporções de tamanho teriam que ser definidas por você.

Com o Media Object, o Bootstrap posiciona os itens de acordo com padrões de design.


Próximos Passos…

Você pode ver os exemplos deste tutorial neste link.

A partir daqui, podemos começar a criar layouts mais interessantes com o Bootstrap. E é isso que vamos fazer nos próximos tutoriais.

Tem algum outro exemplo de imagem que você queria saber?! Deixe nos comentários…

Até a próxima!

8 comentários em “Bootstrap 3: Criando Imagens Responsivas

Adicione o seu

  1. Olá Ruan,

    Existe alguma possibilidade de colocar o .media-body em baixo da imagem?
    E dentro do .media-body, posso usar buttons, progress?

    Parabéns pelos artigos.
    Abs

    1. Muito obrigado, Roberto!

      Sobre as perguntas: O alinhamento da imagem neste componente é sempre à esquerda ou à direita. Não é possível colocar embaixo (pelo que eu pesquisei). Pra fazer isso você pode usar as rows e columns mesmo, sem o media object.

      Dentro do .media-body você pode usar buttons, e outros componentes. Basta ficar de olho nos tamanhos, para manter a proporção.

      Abs!

  2. Quando a classe “img-responsive” é aplicada não é possível centraliza-la?

    Estou com esse problema aqui.

    Minha imagem está com classe (.img-responsive) devidamente aplicada e inserida numa “row” e duma div com “col-md-12”.

    No momento que aplico a classe “img-responsive” a classe “text-center” deixa de fazer efeito e a imagem ica alinhada à esquerda.

    Segue o código abaixo:

    “`

    Pode me dar uma ajuda?
    Desde já te agradeço.

    Abraço;

  3. Ruan,

    Estou inciando os estudos em Bootstrap. Tentei usar a classe img-responsive no carousel, exemplo do próprio site do Bootsrap, mas não funcionou. O que pode estar errado? Obrigado!

Deixe um comentário

Orgulhosamente feito com WordPress | Tema: Baskerville 2 por Anders Noren

Acima ↑