Imagens

Estilos de imagens em geral, tal como: no modo responsivo, formatos arredondados e outros.

Conteúdo

Imagens responsivas

Imagens no CPS Front-end podem ser feitas responsivas amigavelmente através da adição da classe .img-responsive. Isso aplica max-width: 100%;, height: auto; e display: block; na imagem para que dimensione de forma agradável ao elemento pai.

Centralize as imagens que usam a classe .img-responsive, usando .center-block em vez de .text-center. Veja a seção de classes de ajuda para mais detalhes sobre o uso do .center-block.

Imagem responsiva
<img src="http://placehold.it/1200x250" class="img-responsive" alt="Imagem responsiva">

Formas

Adicione classes a um elemento <img> para estilizar imagens facilmente em qualquer projeto.

... ... ...
<img src="http://placehold.it/150x150" alt="..." class="img-rounded">
<img src="http://placehold.it/150x150" alt="..." class="img-circle">
<img src="http://placehold.it/150x150" alt="..." class="img-thumbnail">

Alinhamento

Alinhe imagens com as classes de ajuda ou classes de alinhamento de texto.

... ...
<div class="clearfix">
  <img src="http://placehold.it/150x150" alt="..." class="img-rounded pull-left" >
  <img src="http://placehold.it/150x150" alt="..." class="img-rounded pull-right" >
</div>
...
<img src="http://placehold.it/150x150" alt="..." class="img-rounded center-block" style="display: block;">
...
<div class="text-center">
  <img src="http://placehold.it/150x150" alt="..." class="img-rounded">
</div>