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

Redimensionar foto em CSS

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

  1. Kandalf

    Kandalf Power Member

    Pessoal eu estou aqui um bocadinho atrapalhado mas acho que o que quero fazer é fácil.
    Tenho assim este codigo em css
    Código:
    #foto1 {
        margin-left: 186px;
        margin-top: 1px;
        background-image: url(images/1.jpg);
        width: 140px;
        height: 170px;
        border: 1px solid #000000;
    }
    Eu queria que isso fosse buscar a foto e que ela independentemente se o seu tamanho ser maior que 140 x 170 que ficasse com esse tamanho no site.

    Mas o que me está a acontecer é que a foto fica do tamanho original mas eu só se vê um bocado da foto.

    Será que existe alguma forma de as fotos ficarem automaticamente do tamanho que eu quero?
     
  2. SoundSurfer

    SoundSurfer Power Member

    Esses tamanhos não se aplicam ao background, aplicam-se à class #foto1 ...
    ou seja... isso só pode funcionar eventualmente se tiveres uma tag <img> a que dês a class foto1.

    Em alternativa, só o CSS3 é que tem um propriedade para dar um tamanho ao background... não sei como é que está o seu suporte nos browsers de hoje.
     
  3. Kandalf

    Kandalf Power Member

    Bem eu já vi que estava a fazer uma cena mal o css é para formatar o site mas as imagens acho que devo escolher mesmo no site propriamente dito.

    Eu já tenho o site todo direitinho com o espaço para as fotos lado a lado tudo certinho mas quando coloco lá as fotos aquilo fica desfigurado.

    vou por aqui um exemplo do código css que tenho e depois do html

    Código:
    #foto1 {
        margin-left: 140px;
        margin-top: 6px;
        width: 140px;
        height: 170px;
        border: 1px solid #000000;
    }
    #foto2 {
        margin-left: 152px;
        margin-top: -1px;
        width: 140px;
        height: 170px;
        border: 1px solid #000000;
    depois no html

    Código:
      
    
      <div id="foto1">
            <div id="foto2">
            </div>
      </div>
    
    
    assim fica tudo direitinho mas quando meto as imagens assim

    Código:
      <div id="foto1">
          <img src="images/1.jpg" alt="ima" width="140" height="170" border="0" />
            <div id="foto2">
               <img src="images/1.jpg" alt="ima" width="140" height="170" border="0" />
            </div>
      </div>
    

    Quando faço isto a segunda imagem desce fica tipo escadinhas. Sei que isto pode estar um bocado confuso mas se alguem me desse uma ajuda agradecia muito
     
  4. OldMan

    OldMan Power Member

    Uma imagem às vezes ajudava ;)

    Mas tenta usar as classes #foto1 e #foto2 nas <img> em vez da <div>:

    Código:
    <img src="images/1.jpg" alt="ima" id="foto1" />
    <img src="images/1.jpg" alt="ima" id="foto2" />
     
    Última edição: 11 de Setembro de 2007
  5. Kandalf

    Kandalf Power Member

    Problema resolvido. Fiz aqui umas invenções e ficou como eu queria certamente não deve ser a melhor maneira de fazer isto mas está bom.

    Obrigado pela ajuda SoundSurfer e OldMan
     

Partilhar esta Página