2

Tenho uma dúvida numa pagina HTML que criei.

Toda a página consoante o ecrã grande ou pequeno ele ajusta automaticamente o tamanho. Agora a única coisa que não consigo fazer o mesmo é a Imagem.

Será que me conseguem ajudar?

CSS:

.image {
    border: 0;
    display: inline-block;
    position: relative;
    border-radius: 5px;
}

.image img {
    display: block;
    border-radius: 1px;
}

HTML:

<img src="images/Logo.png" /> 
1
  • 1
    Percebo pouco de html e css para arriscar uma resposta, no entanto julgo que falta indicar height: x%; e width: y%; onde x e y são os valores em percentagem do espaço que a imagem deve ocupar na div que a contém. Note que a div tem também de ter as suas dimensões definidas.
    – ramaral
    9/04/2015 às 15:21

1 Resposta 1

1

A lógica é a mesma que você deve ter usado com os outros elementos, utilizando os valores em porcentagem. Caso você tenha uma imagem assim:

<img src="image.png" class="image" /> 

Perceba que o código que você fez em CSS não irá funcionar, pois a regra vai ser aplicada aos elementos img dentro de elementos .image. Para o resultado esperado, é necessário a inversão dos elementos na regra, tendo a regra aplicada a todos os elementos img que contenham a classe .image.

Logo, podemos ter uma imagem assim:

<img src="image.png" class="image" /> 

Com o seguinte CSS:

img.image {
    width: 50%;
    height: 50%;
}

Fiddle: http://jsfiddle.net/rtqh98wn/

3
  • a só um problema que não consigo entender. Quando faço diminuir o Browser acrescenta-me uma espaço por cima da imagem uma especie de border ou margin
    – ChrisAdler
    9/04/2015 às 16:23
  • Dependendo do tamanho do navegador? Ou você coloca uma margem com porcentagem (o que é bem relativo), ou você se aventura com as media queries. As media queries são regras CSS que são aplicadas aos elementos quando certa condição é verdadeira, e uma das mais utilizadas é a screen, que é sobre a tela do dispositivo. 9/04/2015 às 17:53
  • Acontece em qualquer browser. Assim que faço diminuir a página cria-me um espaço em branco ate iniciar a página. No página no total nunca acontece.
    – ChrisAdler
    10/04/2015 às 9:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .