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 - Criando Models e Migrations
- Incluindo O Código Javascript Em Um Arquivo Externo
- Como Criar Uma Imagem Responsiva
- Laravel - Alterar O Fuso Horário Do Projeto
- Ativar Sistema de Login Laravel 7.0
- Galeria De Fotos PHP - Laravel - PhotosGallery
- Uma Alternativa Ao Uso De target="_blank" - JQuery
- Laravel - Habilitando as Páginas de Cadastro e Login Para o Usuário
- Como Traduzir O Visual Studio 2012 Para Português
- Laravel - Erro SQLSTATE[42000]: Syntax error or access violation: 1071

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