Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RenanChagas

[Resolvido] Redimensionar imagem de acordo com a Tela

Por , em Desenvolvimento frontend

Recommended Posts

RenanChagas    0

RenanChagas
Postado

Boa Noite pessoal,

 

Eu tenho uma pequena duvida: Eu consigo fazer meu codigo verificar a resolução da tela do usuario mas como faço para exibir uma imagem diferente para cada resolução?

 

Codigo exemplo:

 

 

if (screen.width==800)

 

<img src="pictures/fundo4.jpg" width="100%" height="500px" />

 

else if (screen.width==1024)

 

<img src="pictures/fundo5.jpg" width="100%" height="500px" />

 

--------------------

 

Mas a imagem não aparece, como seria o codigo para que a imagem aparecesse.

 

Abraços e agradeço desde já

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunosk2    0

brunosk2
Postado

Faz um código que verifique a resolução da tela do usuário. -- ok

Salva a largura da tela em uma variável.

Ai, você faz o if else.

if (largura == 800)

 

<img src="pictures/fundo4.jpg" width="100%" height="500px" />

 

else if (largura == 1024)

 

<img src="pictures/fundo5.jpg" width="100%" height="500px" />

Compartilhar este post

Link para o post
Compartilhar em outros sites

RenanChagas    0

RenanChagas
Postado

Opa obrigado por responder, e como seria esse codigo? pra salvar a variavel, porque esse que tenho sei que funciona pra verificar a tela, porque soltei um alert só pra confirmar e funcionou, mas quando tentei usar o <img src> ao inves do alert, ele não funciona.

 

 

Teria como me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

crf_h0m3r    5

crf_h0m3r
Postado

Dá uma olhada aqui, Perfect Full Page Background Image (inglês).

 

Quanto ao script, tenta assim:

<script type="text/javascript">
  function trocarClasse() {
     var obj = document.getElementById("bgbody");

     if (screen.width == "800"){
        obj.className = 800;
     }
     else if (screen.width == "1024"){
        obj.className = 1024;
     }
     else if (screen.width == "1280" ){
        obj.className = 1280;
     }
     else if (screen.width == "1440"){
        obj.className = 1440;
     }      
     else if (screen.width == "1600"){
        obj.className = 1600;
     }
     else {
        obj.className = outra;
     }
  }

  </script>

 

No body, coloque:

<body id="bgbody" class="resolucao" onload="trocarClasse ()">

 

Dai é só criar os css à sua preferência:

#bgbody.1600 {
background:url(page_bg1600.jpg);
}

#bgbody.1440 {
background:url(page_bg1440.jpg);
}

 

PS: Solução original do usuário Turdin do fórum JoomlaClube.

Post: Background de acordo com a resolução da tela.

Apenas achei relevante ao assunto deste tópico. Se for de encontro alguma regra, favor deletar.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito