Jump to content
Fórum Script Brasil
  • 0

Como ajustar conteúdo HTML à largura da página?

yankleber

Asked by yankleber,

 Share

Question

yankleber

yankleber

Posted
Posted

Amigos,

A dúvida com certeza será ridiculamente simples para a maioria de vocês, mas vamos lá...

Eu estou começando a construir uma página baseada em um design que eu criei no Photoshop. OK, ela possui alguns elementos de fundo (no caso duas barras horizontais e uma foto de um carro) que deverão ter suas larguras ajustadas de acordo com a resolução horizontal do monitor do usuário (vejam a imagem em anexo). Todo o resto da página será centralizado sobre ela.

A solução que me veio à cabeça foi colocar esses elementos em um fundo de página mas o problema é que o fundo de página é alinhado à esquerda e dependendo da largura da tela do cliente ele simplesmente será cortado à direita, quando o ideal seria cortar dos dois lados proporcionalmente mantendo o fundo centralizado.

Alguma ideia?

Obrigado!

:)

 

warbg.jpg

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0
yankleber

yankleber

Posted
  • Author
Posted

Amigos,

Enquanto esperava desenvolvi uma solução. Talvez seja meio tosca e exista forma melhor, mas lá vai... de repente até ajuda alguém!

A ideia é basicamente capturar a largura da janela do browser do cliente, subtrair esse valor do tamanho total da imagem e dividir por dois. O resultado será a posição para a qual deslocaremos a imagem de fundo para a esquerda.

Por exemplo, no meu caso a imagem de fundo tem 1920px. Se a largura do browser do cliente for 1600px, então a conta resultará em 160px. Daí é só modificar o valor de background-position para -160px, assim:

<style type="text/css">
body {
    background-image: url(warbg.jpg); // url da imagem a ser usada como fundo
    background-repeat:no-repeat;
}
</style>

<script>
    function AdjustBG()
    {
        var cw = document.body.clientWidth;
        var disp = (1920-(cw+16))/2;
        document.body.style.backgroundPosition = "-" + disp + "px 0px";
    }
    
    window.onresize = function(event) {
        AdjustBG();
    }
</script>

</head>

<body onload="AdjustBG();">
</body>
</html>

Observe que a função AdjustBG é chamada duas vezes: primeiro no carregamento da página e depois dentro do evento onresize caso o cliente redimensione a janela do browser.

:)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing


  • Forum Statistics

    • Total Topics
      152.2k
    • Total Posts
      652k
×
×
  • Create New...