Gerador de Aspect Ratio

Mantenha proporções de imagens e vídeos com a propriedade aspect-ratio.

Layout

16 / 9

 estilo.css

aspect-ratio

Define a proporção entre largura e altura do elemento; a altura é calculada automaticamente a partir da largura disponível.

Uso comum

Muito usado em wrappers de vídeo (iframe do YouTube) e placeholders de imagem, evitando 'pulos' de layout (CLS) enquanto o conteúdo carrega.

Perguntas frequentes

Aspect-ratio substitui o hack do padding-top?

Sim, para navegadores modernos ele é a alternativa direta e muito mais simples ao antigo truque de padding-top em porcentagem.

O que acontece se o conteúdo for maior que a proporção?

Por padrão o conteúdo pode estourar a caixa; combine com overflow: hidden se precisar recortar.

Funciona com width e height definidos manualmente?

Se ambos width e height forem definidos, aspect-ratio é ignorado — ele calcula a dimensão que estiver faltando.