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
.
<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>