Validación HTML: Valor incorrecto "100%" para el atributo "height" en el elemento "img": Se esperaba un dígito pero se encontró "%" en su lugar.

Acerca de este problema HTML

La especificación HTML define el atributo height en <img> como un “entero no negativo válido”, lo que significa que debe consistir solo en dígitos — sin unidades, sin signos de porcentaje. Cuando escribes height="100%", el validador espera un carácter de dígito pero encuentra %, produciendo este error. La misma regla se aplica al atributo width.

Esto importa por varias razones. Primero, los navegadores usan los atributos width y height para reservar la cantidad correcta de espacio para una imagen antes de que se cargue, lo que previene cambios de diseño (una métrica de rendimiento clave conocida como Cumulative Layout Shift). Cuando el valor contiene caracteres inválidos como %, los navegadores pueden ignorar el atributo completamente o interpretarlo de manera impredecible, socavando esta reserva de diseño. Segundo, el HTML inválido puede causar renderizado inconsistente entre diferentes navegadores y tecnologías de asistencia. Tercero, el dimensionamiento basado en porcentajes que probablemente tenías en mente simplemente no está soportado a través de atributos HTML — requiere CSS.

La solución depende de lo que estés tratando de lograr:

Dimensiones fijas: Reemplaza el porcentaje con un entero simple que represente el tamaño en píxeles intrínseco o deseado de la imagen (ej., height="300").
Dimensionamiento responsivo o basado en porcentajes: Elimina el atributo height (o establécelo a las dimensiones en píxeles intrínsecas de la imagen) y usa CSS para controlar cómo se escala la imagen dentro de su contenedor.

Es una buena práctica incluir siempre tanto los atributos width como height con las dimensiones intrínsecas reales de la imagen, luego usar CSS para anular el tamaño de visualización. Esto proporciona a los navegadores la información de proporción de aspecto que necesitan para reservar espacio mientras aún permite diseños flexibles.

Ejemplos

Incorrecto: valor de porcentaje en el atributo `height`

Esto desencadena el error de validación porque % no es un dígito válido:

<img src="photo.jpg" width="100%" height="100%" alt="Una foto de paisaje">

Corregido: usando valores enteros en píxeles

Especifica las dimensiones intrínsecas de la imagen como números simples:

<img src="photo.jpg" width="800" height="600" alt="Una foto de paisaje">

Corregido: combinando atributos HTML con CSS para dimensionamiento responsivo

Establece las dimensiones intrínsecas en HTML para estabilidad de diseño, luego usa CSS para hacer la imagen responsiva:

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

<img
  src="photo.jpg"
  width="800"
  height="600"
  class="responsive-img"
  alt="Una foto de paisaje">

Con este enfoque, el navegador conoce la proporción de aspecto de la imagen (800×600) y reserva el espacio apropiado, mientras que CSS asegura que la imagen se escale fluidamente para llenar su contenedor. La regla height: auto mantiene la proporción de aspecto correcta mientras el ancho cambia.

Corregido: llenando un contenedor solo con CSS

Si no conoces las dimensiones intrínsecas de la imagen y simplemente quieres que llene un contenedor, puedes omitir los atributos HTML y depender completamente de 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="Una foto de paisaje">
</div>

La propiedad object-fit: cover asegura que la imagen llene el contenedor sin distorsión, recortando según sea necesario. Ten en cuenta que omitir los atributos width y height significa que el navegador no puede reservar espacio antes de que la imagen se cargue, por lo que este enfoque puede causar cambios de diseño. Donde sea posible, prefiere incluir las dimensiones intrínsecas como se muestra en el ejemplo anterior.