Imagens e um layout dinâmico

votos
1

Eu estou trabalhando em um site com um layout baseado em (por isso pode esticar e comprimir graciosamente quando os usuários aumentar ou diminuir o tamanho da fonte). Este site tem um cabeçalho que deve ser exibido em todas as páginas. Eu tenho uma div cabeçalho em todas as páginas e o arquivo css em todo o site inclui o código:

#header
{
    width: 50em;
    height: 6em;
    margin-bottom: .5em;
    background: url(/IMAGES/header.png);
}

O problema é que isso realmente não esticar graciosamente. Ao aumentar o tamanho do texto, a altura ea largura mudança, mas ** a imagem não aumentam de tamanho; repete simplesmente *. *

Como posso fazer a minha imagem stretch e esmagar, em vez de repetir ou ficar cortada? (Eu gostaria de uma solução baseada em css, se possível ... Eu tenho algumas idéias html na loja, já).

Publicado 10/12/2008 em 02:07
fonte usuário
Em outras línguas...                            


4 respostas

votos
0

@Pianosaurus, acho que sua idéia pode ser a mais simples, embora limitado. Simplesmente, não esticar a imagem, mas certifique-se que parece bom quando não está esticado (centro-lo, e não deixá-lo repetir). Além disso, se você usar uma boa quantidade de preenchimento nas bordas da sua imagem de cabeçalho, o dimensionamento do baixo página não iria causar tais problemas grandes, também.

Respondeu 10/12/2008 em 02:21
fonte usuário

votos
0

Não há maneira de usar o CSS para esticar uma imagem de fundo. Você teria que usar javascript ou algo similar. No entanto, se você tem uma imagem que não precisa ser repetido (por exemplo, combina com o fundo), você poderia fazer algo parecido com isto:

background-position: center center;
background-repeat: no-repeat;

Adenda: A posição tem o seguinte formato: <top | center | bottom | posx> <deixaram | center | direita | ypos> onde posx e ypos podem ser dadas na maneira regular (em, px,%, etc ...) .

Respondeu 10/12/2008 em 02:14
fonte usuário

votos
0

Tenho certeza de que você não pode alterar o dimensionamento de imagens de fundo. Se o arquivo header.png foi incluído como uma imgtag, então você pode definir sua altura e largura para ser um número de emse o navegador redimensioná-la (geralmente fazendo com que pareça porcaria embora).

Lembre-se também que praticamente todos os navegadores modernos fazem página zoom nos dias de hoje, que irá dimensionar tudo para cima sem alterar seu layout muito. Talvez dizer a seus usuários usar esse recurso?

Respondeu 10/12/2008 em 02:14
fonte usuário

votos
0

A única maneira que eu já encontrei é:

  • Ajuste o fundo de #header para bgcolor imagem de cabeçalho de.
  • Coloque novo div dentro #header
  • imagem do cabeçalho dividido em 2
  • Set deixou metade da nova imagem como fundo #header alinhado à esquerda
  • Definir metade direita da nova imagem como fundo # header.div alinhado à direita

É claro que só vai trabalhar com imagens apropriadas embora.

Respondeu 10/12/2008 em 02:13
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more