CSS: “aspect-ratio”: X não é um valor de “aspect-ratio”.

A propriedade CSS aspect-ratio define a proporção preferida de largura para altura da caixa de um elemento. Os navegadores usam esta proporção ao calcular tamanhos automáticos e realizar outras funções de layout, ajustando as dimensões do elemento para manter a proporção especificada mesmo quando o contentor pai ou a janela de visualização mudam de tamanho.

A proporção é expressa como <width> / <height>. Se a barra e a parte height forem omitidas, height assume o valor padrão de 1. Assim, aspect-ratio: 2 é equivalente a aspect-ratio: 2 / 1. A propriedade também aceita a palavra-chave auto, que diz ao elemento para usar a sua proporção intrínseca (se tiver uma), e uma forma combinada como auto 3 / 4, que prefere a proporção intrínseca mas recorre à especificada como alternativa.

Este erro de validação ocorre tipicamente por várias razões:

• Usar separadores ou sintaxe inválidos, como dois pontos (:) em vez de uma barra (/), por exemplo, aspect-ratio: 16:9.
• Fornecer unidades, como aspect-ratio: 16px / 9px. Os valores devem ser números positivos sem unidade.
• Usar zero ou números negativos, que não são válidos. Ambas as partes da proporção devem ser positivas (> 0).
• Fornecer uma string ou palavra-chave não reconhecida, como aspect-ratio: wide ou aspect-ratio: "16/9".
• Espaços em falta à volta da barra, embora isto seja menos comum — 16/9 pode funcionar nos navegadores mas a forma canónica usa espaços: 16 / 9.
• Usar a propriedade em atributos style inline validados contra um nível CSS mais antigo onde aspect-ratio ainda não era reconhecido pelo validador.

Definir este valor corretamente é importante para consistência de layout entre navegadores. Um valor inválido será completamente ignorado pelo navegador, o que significa que o elemento não manterá qualquer proporção, potencialmente prejudicando o seu design. É especialmente importante para imagens responsivas, contentores de vídeo e layouts de cartões onde manter proporções é crítico.

Exemplos

Incorreto: usar dois pontos como separador

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

A sintaxe com dois pontos (comum em especificações de vídeo) não é CSS válido. O validador rejeitará 16:9 como um valor de aspect-ratio.

Incorreto: usar unidades na proporção

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

Os valores da proporção devem ser números sem unidade. Adicionar px ou qualquer outra unidade torna o valor inválido.

Incorreto: usar zero na proporção

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

Ambos os números na proporção devem ser estritamente positivos. Zero não é permitido.

Correto: proporção padrão com uma barra

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

Correto: número único (altura assume o valor padrão de 1)

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

Isto é equivalente a aspect-ratio: 2 / 1.

Correto: proporção quadrada

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

Correto: usar a palavra-chave auto

<img src="photo.jpg" alt="Uma foto de paisagem" style="aspect-ratio: auto; width: 100%;">

O elemento usa a sua proporção intrínseca se disponível.

Correto: combinar auto com uma proporção alternativa

<img src="photo.jpg" alt="Uma foto de paisagem" style="aspect-ratio: auto 4 / 3; width: 100%;">

O navegador prefere a proporção intrínseca da imagem, mas se ainda não carregou ou não tem proporção intrínseca, recorre a 4 / 3. Isto é útil para prevenir mudanças de layout enquanto as imagens carregam.

Correto: usar valores CSS globais

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

Valores globais como inherit, initial, unset, revert e revert-layer também são válidos.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Iniciar teste gratuito Ver preços