Definindo a Altura de uma Imagem em porcentagem | HTML5 e CSS3 parte 1: crie uma página da Web

Olá Thiago, tudo bem?

Nós podemos utilizar a medida de porcentagem para especificarmos tanto o height quanto a width para definir o tamanho de uma imagem.

Caso contrário, significa que algo está ocorrendo para que essa propriedade não seja aplicada, explicarei a seguir um dos motivos mais comuns.

Por padrão, quando utilizamos % em um elemento, ele irá se basear no espaço que o seu elemento pai ocupa. Dessa forma, se o elemento pai tem uma altura/largura de 100px e especificamos que o elemento filho tem uma altura/largura de 20%, significa que esse elemento filho irá ocupar 20px.

Entretanto, caso esse elemento com altura/largura de 20% não tenha elemento pai com altura/largura definida, ele irá se basear nas dimensões da página, ou seja, do navegador e é aí que temos um problema!

O que ocorre é que a largura do navegador já é identificada por padrão, ou seja, quando abrimos nossa página na web ela tem aproximadamente 1100px de largura no formato desktop, 350px para dispositivos móveis etc e essa dinâmica não acontece com a altura, visto que a altura da página é definida de acordo com o seu conteúdo interno, ou seja, é preciso especificar manualmente no código essa propriedade.

Exemplo prático

Supondo que temos o seguinte código:

  <div>
    <img src ="data:image/png;base64,iVB...">
  </div>

A <div> está atuando como elemento pai da <img> e não temos altura e largura especificadas para este elemento pai.

Adicionando altura no elemento filho <img>

a esquerda mostra o código CSS especificando um background: red na tag div e uma height: 60% na tag img, a direita mostra a tela com a div em vermelho, a imagem dentro da div sem ocupar a altura de 60%.

a esquerda mostra o código CSS especificando um background: red na tag div e uma height: 90% na tag img, a direita mostra a tela com a div em vermelho, a imagem dentro da div sem ocupar a altura de 90%

Veja que independentemente do valor que colocamos na altura do elemento filho, sem uma altura especificada no pai, esse elemento se baseia na altura da página e como a página não tem altura por padrão especificada, a propriedade não é aplicada na <img>.

Adicionando altura no elemento pai<div>

a esquerda mostra o código CSS especificando um background: red e uma height: 100px na tag div e também na tag img, há uma heigh:50% sendo aplicada. Na direita mostra a tela com a div em vermelho ocupando 100px, a imagem dentro da div ocupando metade da altura da div A partir do momento em que definimos a altura do elemento pai, a altura em % da imagem é aplicada.

Agora vamos visualizar como funciona com a largura!

Adicionando largura no elemento filho <img>

a esquerda mostra o código CSS especificando um background: red na tag div e na tag img uma width de 5%, na direita mostra a tela com a div em vermelho, a imagem dentro da div ocupando os 5% que é referente a largura da tela Veja que independentemente de termos largura especificada no elemento pai, a width do filho é aplicada pois ela irá se basear na largura da página.

Adicionando largura no elemento pai <div>

a esquerda mostra o código CSS especificando um background: red e width: 100px na tag div e na tag img uma width de 50%, na direita mostra a tela com a div em vermelho, a imagem dentro da div ocupando os 50% de largura que é referente a largura da div

A partir do momento em que atribuímos largura ao elemento pai, a width do filho continua funcionando, mas agora ela se baseia na largura do seu elemento pai.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!