locked
Tipo de Tela: Widescreen RRS feed

  • Pergunta


  • Boa noite!

    Estou com uma dúvida, estou iniciando um novo projeto, mas gostaria de saber  como fica esta questão do tipo de tela, caso seja de 15'', 17'' ou widscreen, como fica a questão de imagem de fundo? como a deixo ajustada ao tamanho da tela, sem 'estica-la' ? Como faço apenas para cortar a imagem caso a tela seja menor?

    Obrigada!

    Juliana


    segunda-feira, 4 de fevereiro de 2008 22:15

Respostas

  • Olá Juliana,

     

    Acredito que seu maior problema não será com o tamanho do monitor, mas sim com a resolução utilizada pelo usuário, pois o monitor apenas exibirá a imagem maior visualmente, se a imagem tiver 500 pixels de largura, continuará tendo, não sei que tipo de sistema ou site você está desenvolvendo mas uma idéia que posso lhe dar é capturar a resolução da tela quando carregar o site, e então escolher a imagem que você pretende colocar de fundo através de javascript.

     

    Olha um exemplo:

    Code Snippet

    <html>
    <head>
    <title>Imagem</title>
    <style type="text/css">

    .img800  {background-image:url(img800.jpg);} 
    .img1024  {background-image:url(img1024.jpg);} 
    .img1280  {background-image:url(img1280.jpg);} 

    </style>

    <script type="text/javascript">
    function carregaImagem()
    {
     var largura = screen.availWidth;
     var pagina = document.getElementsByTagName('body')[0];
      
     switch (largura)
     {
      case 800:
       pagina.className = "img800";
       break;
      case 1024:
       pagina.className = "img1024";
       break;
      case 1280:
       pagina.className = "img1280";
       break;
     }
    }
    </script>
    </head>
    <body onload="carregaImagem();">
    </body>
    </html>

     

    Assim você cria um css para definir uma imagem para cada resolução, quando a página for carregada, a função javascript é chamada, ela captura a resolução da largura da tela e escolhe qual classe css carregar para o corpo da página.

     

    Espero ter ajudado!

     

    []s

     

    PS: Se o post servir, marque-o como resposta! ;-)

    sexta-feira, 15 de fevereiro de 2008 04:43