Como Funciona o Aspect Ratio em CSS

Você definiu width: 100% num contêiner de imagem, mas a altura colapsa para zero até que a imagem carregue—causando aquela mudança brusca de layout que os utilizadores detestam. A propriedade CSS aspect-ratio resolve este problema diretamente, permitindo reservar espaço para o conteúdo antes de ele chegar.

Este artigo explica como a propriedade aspect-ratio participa nos cálculos de dimensionamento CSS, como difere entre elementos substituídos e não substituídos, e por que substitui a antiga técnica do padding-hack para layouts responsivos.

Compreendendo a Propriedade CSS Aspect-Ratio

A propriedade aspect-ratio define uma proporção preferencial entre largura e altura para a caixa de um elemento. A palavra-chave é “preferencial”—ela só tem efeito quando pelo menos uma dimensão é automática.

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Aqui, a largura é explícita (100% do elemento pai), então o navegador calcula a altura automaticamente usando a proporção 16:9. Se definir tanto width quanto height explicitamente, aspect-ratio normalmente não afeta o tamanho usado, pois dimensões definidas têm precedência nos cálculos normais de layout.

Sintaxe e Valores

A propriedade aceita três formas:

aspect-ratio: 16 / 9;      /* proporção largura / altura */
aspect-ratio: 1;            /* mesmo que 1 / 1 (quadrado) */
aspect-ratio: auto 3 / 2;  /* auto com proporção de fallback */

A palavra-chave auto indica ao navegador para usar a proporção natural do elemento, se existir. A combinação auto 3 / 2 significa: use a proporção natural para elementos substituídos, caso contrário use 3/2.

Elementos Substituídos vs. Não Substituídos

A propriedade comporta-se de forma diferente dependendo do tipo de elemento.

Elementos substituídos (<img>, <video>, <iframe>) têm dimensões intrínsecas. Por padrão, aspect-ratio: auto usa a sua proporção natural. Quando especifica aspect-ratio: auto 16/9, o navegador usa a proporção natural do conteúdo multimédia assim que carregado, mas reserva espaço usando 16/9 previamente—prevenindo mudanças de layout.

Elementos não substituídos (<div>, <section>) não têm proporção intrínseca. Definir aspect-ratio: 1 numa <div> com width: 200px produz um quadrado de 200×200. A propriedade controla diretamente as dimensões da caixa.

Aspect-Ratio Molda a Caixa, Não o Conteúdo Multimédia

Uma distinção crítica: aspect-ratio controla as dimensões do contêiner, não como o conteúdo multimédia o preenche. Para imagens ou vídeos, use object-fit para controlar o comportamento do conteúdo dentro da caixa:

.thumbnail {
  aspect-ratio: 1;
  object-fit: cover;
}

Isto cria um contêiner quadrado onde a imagem cobre a área, cortando conforme necessário.

CSS Aspect Ratio vs. o Padding Hack

Antes do aspect-ratio ter suporte nos navegadores, os programadores usavam o truque da percentagem de padding-bottom:

/* Padding hack legado */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 9/16 = 0.5625 */
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Isto funciona porque as percentagens de padding são calculadas contra a largura do elemento pai, criando uma altura baseada em proporção. Mas requer elementos wrapper, posicionamento absoluto e cálculos obscuros.

A abordagem moderna é mais limpa:

.video-wrapper {
  aspect-ratio: 16 / 9;
}
.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

Use aspect-ratio como padrão. Reserve o padding hack apenas se precisar suportar navegadores antigos como o IE.

Aspect-Ratio em Flexbox e Grid

Usar aspect-ratio em layouts flexbox e grid funciona, mas interações de dimensionamento automático podem produzir resultados inesperados.

Em CSS Grid, aspect-ratio funciona naturalmente com trilhas de tamanho automático:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.grid-item {
  aspect-ratio: 1;
}

Cada item torna-se quadrado, com altura correspondente à sua largura determinada pela grid.

Em Flexbox, esteja atento que flex-grow e flex-shrink afetam a largura calculada, que então determina a altura via aspect-ratio. Se os itens esticarem inesperadamente, verifique as suas propriedades flex. Definir uma width ou flex-basis explícita no item dá ao aspect-ratio uma dimensão estável para trabalhar.

Para ambos os sistemas de layout, defina min-height: 0 nos itens se o conteúdo transbordar a altura restringida pelo aspect-ratio.

Layouts Responsivos Práticos com Aspect-Ratio

Aqui está um padrão comum para imagens responsivas em cards:

.card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

E para vídeos incorporados:

.embed-container {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
}

Ambos os padrões reservam espaço de layout imediatamente, eliminando mudanças cumulativas de layout (CLS).

Conclusão

A propriedade aspect-ratio define uma proporção preferencial usada quando pelo menos uma dimensão é auto. Ela molda a caixa do elemento—não o conteúdo multimédia—e substitui a técnica do padding-hack para navegadores modernos. Ao trabalhar com imagens ou vídeo, combine-a com object-fit para controlar como o conteúdo multimédia preenche o espaço. Em contextos de flexbox e grid, atenção às interações de dimensionamento automático que podem afetar as dimensões calculadas.

Perguntas Frequentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.