Verificação HTML: Valor inválido "auto" para o atributo "height | width" no elemento "img": Esperado um dígito mas encontrado "a".

Sobre este problema HTML

A especificação HTML define os atributos width e height em <img> como aceitando apenas números inteiros não negativos válidos — uma sequência de um ou mais dígitos (0–9) sem letras, unidades ou símbolos. Estes atributos informam ao navegador as dimensões intrínsecas da imagem em pixels, o que o ajuda a alocar o espaço correto no layout antes da imagem carregar, prevenindo mudanças de layout do conteúdo (CLS).

Quando você define height="auto" ou width="50%", o validador espera um dígito como primeiro caracter mas encontra uma letra ou símbolo, produzindo o erro: “Valor inválido ‘auto’ para o atributo ‘height’ no elemento ‘img’: Esperado um dígito mas encontrado ‘a’.”

Isto é importante por várias razões:

Conformidade com os padrões: Os navegadores podem ignorar silenciosamente valores de atributos inválidos, significando que o seu dimensionamento pretendido não terá efeito e você obterá comportamento padrão sem qualquer aviso visível aos utilizadores.
Estabilidade de layout: Atributos width e height válidos permitem ao navegador calcular a proporção da imagem antes de ela carregar, reservando a quantidade correta de espaço e prevenindo mudanças de layout. Valores inválidos anulam este mecanismo.
Previsibilidade: Confiar na recuperação de erros do navegador para markup inválido leva a comportamento inconsistente entre diferentes navegadores e versões.

Para corrigir isto, você tem duas opções:

Use números inteiros simples nos atributos width e height para especificar dimensões em pixels (ex.: width="600" height="400").
Use CSS para qualquer dimensionamento não pixel ou dinâmico como auto, percentagens, max-width, unidades viewport, etc.

Uma boa prática é definir os atributos width e height com as dimensões de pixels intrínsecas reais da imagem (para preservar a proporção e prevenir mudança de layout), depois usar CSS para controlar o tamanho renderizado de forma responsiva.

Exemplos

Inválido: usar “auto” ou unidades em atributos

<!-- "auto" não é um número inteiro válido -->

<img src="photo.jpg" alt="Um gato sentado numa janela" height="auto" width="auto">

<!-- Percentagem não é um número inteiro válido -->

<img src="banner.jpg" alt="Banner do site" width="100%">

<!-- Unidades como "px" não são permitidas -->

<img src="icon.png" alt="Ícone de configurações" width="32px" height="32px">

Válido: usar números inteiros simples em atributos

<!-- Correto: números inteiros simples representando pixels -->

<img src="photo.jpg" alt="Um gato sentado numa janela" width="800" height="600">

<img src="icon.png" alt="Ícone de configurações" width="32" height="32">

Válido: usar CSS para dimensionamento responsivo ou dinâmico

Quando precisar de comportamento como auto, percentagens ou max-width, use CSS:

<!-- Use atributos para tamanho intrínseco, CSS para comportamento responsivo -->

<img
  src="photo.jpg"
  alt="Um gato sentado numa janela"
  width="800"
  height="600"
  style="max-width: 100%; height: auto;">

Esta abordagem dá-lhe o melhor de ambos os mundos: o navegador conhece a proporção da imagem através dos atributos (prevenindo mudança de layout), enquanto o CSS garante que ela escala de forma responsiva dentro do seu contentor.

Válido: usar uma classe CSS para reutilização

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

<img
  src="photo.jpg"
  alt="Um gato sentado numa janela"
  width="800"
  height="600"
  class="responsive-img">