Propriedade Aspect-Ratio
Última atualização: 2026-09-13
aspect-ratio Propriedade Aspect-Ratio
A propriedade aspect-ratio força um elemento a manter uma proporção fixa entre largura e altura, eliminando a necessidade do antigo hack de porcentagem de padding. Seu valor padrão, auto, usa a proporção intrínseca do elemento, como em imagens. É um recurso CSS relativamente novo que simplifica muito os contêineres responsivos para vídeo e cards.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | length |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
aspect-ratio: auto || <ratio>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Use a proporção intrínseca do elemento. |
<ratio> | Tipo | Uma proporção especificada, como 16/9. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| aspect-ratio | ✓ v88 | ✓ v88 | ✓ v89 | ✓ v15 | ✓ v74 |
| Suportado em todos os principais navegadores | |||||
Dica： Combinar aspect-ratio com width:100% cria um contêiner proporcional adaptativo, frequentemente usado para vídeo e imagens incorporados.
❓ Perguntas Frequentes
QQual é a diferença entre aspect-ratio e o hack de padding-top?
AAmbos criam contêineres proporcionais, mas aspect-ratio é uma propriedade nativa, o que é mais legível e fácil de manter. O hack de padding-top usa um padding em porcentagem relativo à largura para empurrar a altura, tipicamente com um pseudo-elemento ::before e conteúdo posicionado absolutamente, o que é complicado. O aspect-ratio faz o trabalho em uma linha, por isso é a escolha recomendada para novos projetos.
QO height ainda funciona quando aspect-ratio está definido?
AO aspect-ratio calcula a altura a partir de uma largura já determinada; se você também definir height explicitamente, essa altura explícita vence e substitui a altura calculada pela proporção, então a proporção não é mais garantida. Para manter a proporção forçada, não defina height; defina apenas width e aspect-ratio. Observe também que auto significa a proporção intrínseca do elemento, como as dimensões originais de uma imagem.
QPor que o aspect-ratio não está funcionando?
ACausas comuns: primeiro, o elemento também tem um height definido, e um height explícito tem prioridade; segundo, o elemento não tem largura, com width:auto e sem conteúdo, deixando a proporção sem base; terceiro, o navegador é muito antigo, já que a propriedade ganhou suporte estável no Chrome 88, Firefox 89 e Safari 15. Ao depurar, primeiro confirme o estado de largura e altura e dê ao elemento uma largura como width:100%.
QComo construo um contêiner de vídeo responsivo com aspect-ratio?
ADefina width:100%; aspect-ratio:16/9 no contêiner. Conforme a largura do pai muda, a altura é calculada automaticamente para preservar a proporção, então a caixa escala proporcionalmente; então posicione um iframe ou vídeo absoluto dentro para preenchê-lo. Isso substitui totalmente o hack de padding-top. Para imagens, predefina aspect-ratio em um contêiner img para reduzir o deslocamento de layout (CLS) enquanto a imagem carrega, o que melhora mensuravelmente os Core Web Vitals.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
