aspect-ratio → padding-bottom

CSS aspect-ratio: do hack do padding à propriedade nativa

Antes de 2021, reservar espaço para um vídeo 16:9 significava o hack do padding-top: um wrapper com padding-top: 56.25% (resultado de 9/16 * 100) e o conteúdo posicionado absolutamente dentro. O truque funcionava porque padding em porcentagem é resolvido contra a largura do container, forçando indiretamente uma altura proporcional. Era engenhoso — e custoso de manter, porque cada filho exigia posicionamento absoluto.

O CSS moderno substitui tudo isso por uma única propriedade: aspect-ratio: 16 / 9. Chrome 88+, Firefox 89+ e Safari 15+ já têm suporte nativo. O navegador calcula a dimensão que falta automaticamente, então os filhos fluem normalmente — sem position: absolute, sem wrapper extra, sem matemática manual de porcentagem.

Razões comuns para memorizar

• 16:9 — vídeo HD e embeds do YouTube (razão ≈ 1,7778);
• 4:3 — TV antiga e dispositivos legados;
• 1:1 — posts quadrados do Instagram e avatares;
• 9:16 — Stories, Reels e TikTok vertical;
• 21:9 — formato cinematográfico ultrawide;
• 1.91:1 — imagens de Open Graph e Twitter card (1200x630).

Casos de uso

Vídeos embeddados, placeholders de imagem, thumbnails de card, hero sections — qualquer caixa que precisa manter a forma independente da largura. Combine aspect-ratio com object-fit no conteúdo: cover preenche e corta, contain ajusta com letterbox, fill estica.

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

.video iframe,
.video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Core Web Vitals e CLS

Um dos principais motivos para adotar aspect-ratio é o Cumulative Layout Shift. Quando uma imagem ou iframe carrega depois do resto da página, o conteúdo pula a menos que o slot já tenha tamanho conhecido. Declarar uma razão reserva esse espaço de cara — antes mesmo do metadado carregar — mantendo o CLS perto de zero. O mesmo efeito pode ser obtido em <img> com os atributos width e height, mas para iframes e imagens de CSS, aspect-ratio é a solução mais limpa.

Razões responsivas

A razão pode trocar com media queries ou container queries. Um hero pode ser 21:9 no desktop e 4:5 no mobile para manter o ponto focal visível. Combinada com srcset para variantes de imagem, o resultado é um layout que respeita direção de arte e performance ao mesmo tempo.

Perguntas frequentes

Como deixar um iframe do YouTube responsivo? Aplique (no elemento ou em um wrapper) aspect-ratio: 16 / 9 com width: 100%. Sem padding hack, sem position absolute.

O hack do padding-top ainda é necessário? Só para navegadores legados como IE11. Todos os navegadores modernos suportam a propriedade; em contextos muito antigos, mantenha o hack como fallback envolto em @supports not (aspect-ratio: 1).

O aspect-ratio realmente evita layout shift? Sim, esta é a principal contribuição de performance. Ao reservar o slot antes do asset carregar, ele impede que o conteúdo abaixo pule quando o asset chega — exatamente o comportamento medido pelo Google como CLS.

E se o conteúdo for mais alto do que a razão permite? A propriedade é tratada como dica. Se o conteúdo interno não couber, a caixa cresce além da razão (ela respeita min-content). Use overflow ou tamanho fixo para forçar o contrário.