8 de janeiro de 2014

Como Criar Uma Imagem Responsiva

Hoje todos os desenvolvedores se preocupam com a visualização de seus sites em dispositivos mobile.
Para quem muitas vezes já utiliza alguma plataforma ou Framework que oferece uma estrutura responsiva para o site e só precisa fazer alguns ajustes, vou deixar aqui algumas dicas de como criar uma imagem responsiva.

* Para alterar direto no css:

.responsive {            
max-width: 500px;          
width: 100%;            
height: auto;    }  

.responsive  img{        
 max-width: 500px;   /* Máximo da largura da imagem */          
width: 100%;          
max-height: 300px;  /* Máximo da altura da imagem */          
min-height: auto;      /* Mínimo da altura, por padrão "auto" */   }

No html, as imagens devem ser inseridas na div "responsive" conforme exemplificado abaixo:

<div class="responsive">
        <img src="img-responsiva.jpg" alt="img-responsiva" />
 </div>


*Para alterar direto na tag html <img> :

<img src="imagemresponsiva.jpg" style="max-width: 500px; width: 100%; height: auto; " alt="img-responsiva" />

Na tag "max-width", você altera a largura padrão da imagem.

4 comentários:

  1. Muito obrigada pela dica! Tinha trocado todos os títulos das postagens por imagens hospedadas aí quando fui ver no celular... ficou tudo bagunçado! Agora consegui resolver :)
    Se puder me visitar/seguir - juro que não quero ser chata - aqui:

    meualeatorio.blogspot.com

    Obrigada!

    ResponderExcluir
  2. Respostas
    1. Posta o código pra eu verificar pra você.

      Excluir

Postagens Mais Visualizadas

Últimos Comentários