CSS: “aspect-ratio”: X no es un valor válido para “aspect-ratio”.

La propiedad CSS aspect-ratio define la proporción preferida de ancho a alto de la caja de un elemento. Los navegadores usan esta proporción al calcular tamaños automáticos y realizar otras funciones de diseño, ajustando las dimensiones del elemento para mantener la proporción especificada incluso cuando el contenedor padre o el viewport cambie de tamaño.

La proporción se expresa como <width> / <height>. Si se omite la barra diagonal y la parte de height, height toma por defecto el valor 1. Así que aspect-ratio: 2 es equivalente a aspect-ratio: 2 / 1. La propiedad también acepta la palabra clave auto, que indica al elemento que use su proporción intrínseca (si la tiene), y una forma combinada como auto 3 / 4, que prefiere la proporción intrínseca pero recurre a la especificada como alternativa.

Este error de validación normalmente ocurre por varias razones:

• Usar separadores o sintaxis inválidos, como dos puntos (:) en lugar de una barra diagonal (/), ej., aspect-ratio: 16:9.
• Proporcionar unidades, como aspect-ratio: 16px / 9px. Los valores deben ser números positivos sin unidades.
• Usar números cero o negativos, que no son válidos. Ambas partes de la proporción deben ser positivas (> 0).
• Proporcionar una cadena de texto o palabra clave no reconocida, como aspect-ratio: wide o aspect-ratio: "16/9".
• Falta de espacios alrededor de la barra diagonal, aunque esto es menos común — 16/9 puede funcionar en navegadores pero la forma canónica usa espacios: 16 / 9.
• Usar la propiedad en atributos style en línea validados contra un nivel CSS más antiguo donde aspect-ratio aún no era reconocido por el validador.

Obtener este valor correctamente es importante para la consistencia del diseño entre navegadores. Un valor inválido será completamente ignorado por el navegador, lo que significa que el elemento no mantendrá ninguna proporción, potencialmente rompiendo tu diseño. Es especialmente importante para imágenes responsivas, contenedores de video y diseños de tarjetas donde mantener las proporciones es crítico.

Ejemplos

Incorrecto: usar dos puntos como separador

<div style="aspect-ratio: 16:9; width: 100%;"></div>

La sintaxis con dos puntos (común en especificaciones de video) no es CSS válido. El validador rechazará 16:9 como valor de aspect-ratio.

Incorrecto: usar unidades en la proporción

<div style="aspect-ratio: 16px / 9px; width: 100%;"></div>

Los valores de proporción deben ser números sin unidades. Agregar px o cualquier otra unidad hace que el valor sea inválido.

Incorrecto: usar cero en la proporción

<div style="aspect-ratio: 0 / 1; width: 100%;"></div>

Ambos números en la proporción deben ser estrictamente positivos. El cero no está permitido.

Correcto: proporción estándar con barra diagonal

<div style="aspect-ratio: 16 / 9; width: 100%;"></div>

Correcto: número único (height toma por defecto el valor 1)

<div style="aspect-ratio: 2; width: 100%;"></div>

Esto es equivalente a aspect-ratio: 2 / 1.

Correcto: proporción cuadrada

<div style="aspect-ratio: 1 / 1; width: 100%;"></div>

Correcto: usar la palabra clave auto

<img src="photo.jpg" alt="A landscape photo" style="aspect-ratio: auto; width: 100%;">

El elemento usa su proporción intrínseca si está disponible.

Correcto: combinar auto con una proporción de respaldo

<img src="photo.jpg" alt="A landscape photo" style="aspect-ratio: auto 4 / 3; width: 100%;">

El navegador prefiere la proporción intrínseca de la imagen, pero si aún no ha cargado o no tiene proporción intrínseca, recurre a 4 / 3. Esto es útil para prevenir el cambio de diseño mientras las imágenes cargan.

Correcto: usar valores CSS globales

<div style="aspect-ratio: inherit; width: 100%;"></div>

Los valores globales como inherit, initial, unset, revert y revert-layer también son válidos.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios