8 de janeiro de 2014
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.
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.
Assinar:
Postar comentários
(Atom)
Destaques:
- Laravel - Alterar O Fuso Horário Do Projeto
- Laravel - Criando Models e Migrations
- Sublime - Atalhos Para Comentar O Código
- Mapa do Brasil com link para cada estado
- Galeria De Fotos PHP - Laravel - PhotosGallery
- Laravel - Habilitando as Páginas de Cadastro e Login Para o Usuário
- Como Alterar o Engine no MySQL pelo Wamp
- Como Fazer O Wamp Iniciar Junto Com O Windows
- Sublime - Como Programar Atalho Para Identar O Código
- Como Traduzir O Visual Studio 2012 Para Português
Comentários
Perfil
Formada em Sistemas de Informação e pós-graduada em Engenharia de Software.
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 :)
ResponderExcluirSe puder me visitar/seguir - juro que não quero ser chata - aqui:
meualeatorio.blogspot.com
Obrigada!
Muito obrigado!
ResponderExcluirnão consegui
ResponderExcluirPosta o código pra eu verificar pra você.
ExcluirOlá, no meu não está dando certo, poderia me ajudar? machionweb.blogspot.com
ResponderExcluir#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);
}
Ei Eduardo!
ResponderExcluirTenta 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;
}
Deu beleza muito obrigado, olha aí meu site http://revistaonlinedequixada.com
ResponderExcluirFuncionou legal aqui! Obrigado!
ResponderExcluir