1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Tamanho de imagem em CSS

Discussão em 'Web Development' iniciada por Kandalf, 25 de Julho de 2007. (Respostas: 10; Visualizações: 18512)

  1. Kandalf

    Kandalf Power Member

    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
     
  2. Scarecrow

    Scarecrow Power Member

    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
     
  3. Kandalf

    Kandalf Power Member

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

    Código:
    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.
     
  4. b1t dA3m0n

    b1t dA3m0n Power Member

    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?
     
  5. Kandalf

    Kandalf Power Member

    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
     
  6. b1t dA3m0n

    b1t dA3m0n Power Member

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

    Claro que é possivel, em design tudo é possivel :)
     
  7. Kandalf

    Kandalf Power Member

    Última edição pelo moderador: 28 de Julho de 2007
  8. hYpe

    hYpe [email protected] Member

    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?
     
  9. b1t dA3m0n

    b1t dA3m0n Power Member

    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


    Código:
    <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;">&nbsp;</TD>
            <TD style="background-color: black;">&nbsp;</TD>
            <TD style="background-color: black;">&nbsp;</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>
    
     
  10. B12

    B12 Power Member

    Tables hoje em dia ? Não.

    A tua imagem já tem uma width especifica, logo não vejo o porque do 'repeat-x'.

    Na minha opinião deves começar a construir o layout com uma div centrada horizontalmente e sem repeat.

    Vai a este site: http://www.glish.com/css/3.asp e começa a construir o teu layout apartir deste, é um bom ponto de partida para quem quer aprender.
     
  11. Biofobico

    Biofobico Power Member

    Realmente creio que as divs são bem melhores.
     

Partilhar esta Página