8 de janeiro de 2014

Como Criar Uma Imagem Responsiva

11:47 | By Kênia Ferreira | |
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.

8 comentários:

  1. Fer Freitas2 de janeiro de 2016 19:03

    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. Rubens Braz1 de julho de 2016 15:40

    Muito obrigado!

    ResponderExcluir
  3. Unknown16 de junho de 2017 16:42

    não consegui

    ResponderExcluir
  4. Eduardo Augusto22 de agosto de 2017 18:36

    Olá, no meu não está dando certo, poderia me ajudar? machionweb.blogspot.com

    #sectionIntro {
    text-align: center;
    background-color: #1a1a1a;
    background-image: url(https://3.bp.blogspot.com/-LRIFjHOMy4g/WZxZ2jIvb9I/AAAAAAAACf4/mdwLh25gTVoYZBx6WKmi13TEeuoEpmEWwCLcBGAs/s1600/FUNDO.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: auto;
    max-width: 100%;
    -webkit-box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
    box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
    }

    ResponderExcluir
  5. Kênia Ferreira23 de agosto de 2017 11:32

    Ei Eduardo!
    Tenta assim:

    #sectionIntro {
    text-align: center;
    background-color: #1a1a1a;
    background-image: url(https://3.bp.blogspot.com/-LRIFjHOMy4g/WZxZ2jIvb9I/AAAAAAAACf4/mdwLh25gTVoYZBx6WKmi13TEeuoEpmEWwCLcBGAs/s1600/FUNDO.png);
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    }

    Ou assim:

    #sectionIntro {
    text-align: center;
    background-color: #1a1a1a;
    background-image: url(https://3.bp.blogspot.com/-LRIFjHOMy4g/WZxZ2jIvb9I/AAAAAAAACf4/mdwLh25gTVoYZBx6WKmi13TEeuoEpmEWwCLcBGAs/s1600/FUNDO.png);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    ResponderExcluir
  6. Da Redação10 de dezembro de 2017 17:06

    Deu beleza muito obrigado, olha aí meu site http://revistaonlinedequixada.com

    ResponderExcluir
  7. Flavio14 de janeiro de 2018 00:11

    Funcionou legal aqui! Obrigado!

    ResponderExcluir

Assinar: Postar comentários (Atom)

Comentários

Perfil

Kênia Ferreira
Formada em Sistemas de Informação e pós-graduada em Engenharia de Software.