Verificação HTML: Valor inválido "100%" para o atributo "height" no elemento "img": Era esperado um dígito mas foi encontrado "%" em vez disso.

Sobre este problema HTML

A especificação HTML define o atributo height em <img> como um “número inteiro não-negativo válido”, o que significa que deve consistir apenas em dígitos — sem unidades, sem sinais de percentagem. Quando você escreve height="100%", o validador espera um caractere de dígito mas encontra %, produzindo este erro. A mesma regra aplica-se ao atributo width.

Isto importa por várias razões. Primeiro, os navegadores usam os atributos width e height para reservar a quantidade correta de espaço para uma imagem antes de ela carregar, o que previne mudanças de layout (uma métrica de desempenho chave conhecida como Cumulative Layout Shift). Quando o valor contém caracteres inválidos como %, os navegadores podem ignorar o atributo inteiramente ou interpretá-lo de forma imprevisível, prejudicando esta reserva de layout. Segundo, HTML inválido pode causar renderização inconsistente entre diferentes navegadores e tecnologias assistivas. Terceiro, o dimensionamento baseado em percentagem que você provavelmente pretendia simplesmente não é suportado através de atributos HTML — requer CSS.

A correção depende do que você está tentando alcançar:

Dimensões fixas: Substitua a percentagem por um número inteiro simples representando o tamanho em pixels intrínseco ou desejado da imagem (por exemplo, height="300").
Dimensionamento responsivo ou baseado em percentagem: Remova o atributo height (ou defina-o para as dimensões intrínsecas em pixels da imagem) e use CSS para controlar como a imagem escala dentro do seu contentor.

É uma boa prática incluir sempre ambos os atributos width e height com as dimensões intrínsecas reais da imagem, depois usar CSS para sobrepor o tamanho de exibição. Isto dá aos navegadores a informação de proporção que precisam para reservar espaço enquanto ainda permite layouts flexíveis.

Exemplos

Incorreto: valor percentual no atributo `height`

Isto desencadeia o erro de validação porque % não é um dígito válido:

<img src="photo.jpg" width="100%" height="100%" alt="A landscape photo">

Corrigido: usando valores inteiros em pixels

Especifique as dimensões intrínsecas da imagem como números simples:

<img src="photo.jpg" width="800" height="600" alt="A landscape photo">

Corrigido: combinando atributos HTML com CSS para dimensionamento responsivo

Defina as dimensões intrínsecas em HTML para estabilidade de layout, depois use CSS para tornar a imagem responsiva:

<style>
  .responsive-img {
    width: 100%;
    height: auto;
  }
</style>

<img
  src="photo.jpg"
  width="800"
  height="600"
  class="responsive-img"
  alt="A landscape photo">

Com esta abordagem, o navegador conhece a proporção da imagem (800×600) e reserva o espaço apropriado, enquanto o CSS garante que a imagem escala fluidamente para preencher o seu contentor. A regra height: auto mantém a proporção correta à medida que a largura muda.

Corrigido: preenchendo um contentor apenas com CSS

Se você não conhece as dimensões intrínsecas da imagem e simplesmente quer que ela preencha um contentor, pode omitir os atributos HTML e confiar inteiramente no CSS:

<style>
  .image-container {
    width: 300px;
    height: 200px;
  }

  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

<div class="image-container">
  <img src="photo.jpg" alt="A landscape photo">
</div>

A propriedade object-fit: cover garante que a imagem preenche o contentor sem distorção, cortando conforme necessário. Note que omitir os atributos width e height significa que o navegador não pode reservar espaço antes da imagem carregar, por isso esta abordagem pode causar mudanças de layout. Quando possível, prefira incluir as dimensões intrínsecas como mostrado no exemplo anterior.