Como ajustar conteúdo HTML à largura da página? - HTML, XHTML, CSS - Fórum Script Brasil
Como ajustar conteúdo HTML à largura da página?
Asked by yankleber,
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.
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:
background-image: url(warbg.jpg); // url da imagem a ser usada como fundo
function AdjustBG()
var disp = (1920-(cw+16))/2;
document.body.style.backgroundPosition = "-" + disp + "px 0px";
AdjustBG();
<body onload="AdjustBG();">
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.