Tamanho de imagem em CSS [Arquivo]

View Full Version : Tamanho de imagem em CSS

Kandalf

25-07-2007, 17:14

Eu estou a construir um site e tenho uma imagem de fundo e gostava de saber se é possível fazer com que ela mude de tamanho conforme o tamanho da da janela do utilizador. Se não fosse uma imagem acho que era fácil mas sendo imagem não tou a ver se é possível fazer isto

Scarecrow

25-07-2007, 17:24

Conforme a resolução ou a janela mesmo?

Senão seria algo do género

img (ou uma classe para isso .X)
{
width:90%;
height:90%;
}

Percentagens à toa.. mas acho que deu para entender.. senão é o que queres, peço desculpa :)

Mas aqueles dois campos dão para definir o tamanho da imagem, agora se for quando se faz resize mesmo da janela, se calhar tens que usar javascript para o evento de resize..

Cumps

Kandalf

25-07-2007, 18:03

Eu percebo muito pouco disto e não estou a perceber bem mas é assim eu tenho isto

body {
background-color: #000000;
color: #00FF33;
background-image: url(images/body_bg.jpg);
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;

}

e aquela imagem "body_bg.jpg" tem um tamanho e eu queria que esse tamanho mudasse conforme o tamanho da janela.

b1t dA3m0n

25-07-2007, 21:26

Eu percebo muito pouco disto e não estou a perceber bem mas é assim eu tenho isto

body {
background-color: #000000;
color: #00FF33;
background-image: url(images/body_bg.jpg);
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;

}e aquela imagem "body_bg.jpg" tem um tamanho e eu queria que esse tamanho mudasse conforme o tamanho da janela.

Boas,

mas tu já la tens o repeat-y que deveria fazer precisamente isso (y = vertical, para a horizontal usas repeat-x;)

Ou nao é isso que pretendes?

Kandalf

25-07-2007, 21:50

Bem acho que não é bem isso eu tenho uma imagem e queria que o tamanho dela mudasse dependendo do tamanho da janela.

Nota: o body_gb.jpg é uma imagem com 1206 x 12 e a cor nas bordas e diferente de no centro e quando estou a ver isto num monitor com muita resoluçao e uma janela grande a maior que os 1206 as partes de lado ficam pretas que é a cor do fundo eu queria que tipo a imagem estica-se mas secalhar não é possivel

b1t dA3m0n

25-07-2007, 21:56

E que tal se mostrasses a imagem em questao, pode ser que se torne mais facil de perceber.

mas secalhar não é possivelClaro que é possivel, em design tudo é possivel :)

Kandalf

26-07-2007, 01:30

A imagem e esta

http://img503.imageshack.us/img503/3913/bodybgdn8.jpg

Quando a tela e maior que o tamanho da imagem ela fica centrada mas com a parte de fora da cor do fundo e eu queria que a imagem esticasse e ficasse do tamanho da janela

hYpe

26-07-2007, 03:52

Secalhar esticando nao vai ficar com o efeito que desejas, nao sei..

Porque nao mudares a cor do fundo para uma cor q fique bem?

b1t dA3m0n

26-07-2007, 19:46

Dá uma olhada neste exemplo. Foi feito com uma tabela mas pode igualmente ser realizado com a ajuda de divs.
As imagens estao aqui:
esquerda.jpg - http://img505.imageshack.us/img505/3213/esquerdaoy9.jpg
direita.jpg - http://img505.imageshack.us/img505/6105/direitaiq9.jpg
meio.jpg - http://img409.imageshack.us/img409/6445/meiokx2.jpg
blank.gif - uma imagem tranparente com 1x1 px

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE></TITLE>
<META NAME="description" CONTENT="">
<META NAME="keywords" CONTENT="">
</HEAD>
<BODY>
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" SUMMARY="">
<TR>
<TD style="background-image: url(esquerda.jpg); background-repeat: no-repeat;"><IMG SRC="blank.gif" WIDTH="170px" HEIGHT="12px" BORDER="0"></TD>
<TD style="background-image: url(meio.jpg); background-repeat: repeat-x; width: 100%;"></TD>
<TD style="background-image: url(direita.jpg); background-repeat: no-repeat;"><IMG SRC="blank.gif" WIDTH="170px" HEIGHT="12px" BORDER="0"></TD>
</TR>
<TR>
<TD style="background-color: black;"> </TD>
<TD style="background-color: black;"> </TD>
<TD style="background-color: black;"> </TD>
</TR>
<TR>
<TD style="background-image: url(esquerda.jpg); background-repeat: no-repeat;"><IMG SRC="blank.gif" WIDTH="170px" HEIGHT="12px" BORDER="0"></TD>
<TD style="background-image: url(meio.jpg); background-repeat: repeat-x; width: 100%;"></TD>
<TD style="background-image: url(direita.jpg); background-repeat: no-repeat;"><IMG SRC="blank.gif" WIDTH="170px" HEIGHT="12px" BORDER="0"></TD>
</TR>
</TABLE>
</BODY>
</HTML>

B12

28-07-2007, 22:47

Biofobico

29-07-2007, 01:42

Tables hoje em dia ? Não.

Realmente creio que as divs são bem melhores.