Calculadora de Proporção de Aspecto — Dimensões Responsive
Calcule dimensões faltantes a partir de proporções de aspecto com nossa Calculadora de Proporção de Aspecto. Gere código CSS para mídia responsiva com propriedade moderna aspect-ratio ou técnica legacy padding-bottom. Perfeito para imagens responsivas, embeds de vídeo e design de layout com presets comuns como 16:9, 4:3, 21:9 e mais.
Recursos
- Calcular largura ou altura ausente a partir da proporção de aspecto
- Predefinições de proporções comuns (16:9, 4:3, 21:9, 1:1, etc.)
- Gerador do truque CSS padding-bottom
- Múltiplos formatos de proporção (proporção, decimal, porcentagem)
- Calculadora de tamanhos de imagem responsivos
- Cálculo em tempo real
- Processamento 100% no lado do cliente
Proporções de Aspecto Comuns
- 16:9 — Vídeo HD padrão, YouTube, telas modernas
- 4:3 — TV clássica, monitores antigos
- 21:9 — Monitores ultrawide, cinematográfico
- 1:1 — Quadrado (posts do Instagram)
- 9:16 — Vídeo vertical (Instagram Stories, TikTok)
Casos de Uso Comuns
- Imagens Responsivas: Manter proporção de aspecto ao escalar imagens
- Incorporações de Vídeo: Calcular dimensões de iframe para YouTube, Vimeo
- Proporção de Aspecto CSS: Gerar truque padding-bottom para navegadores antigos
- Redimensionamento de Imagem: Calcular dimensões de corte ou redimensionamento
- Design de Layout: Planejar layouts de grade responsivos
Técnicas CSS de Proporção de Aspecto
Abordagem moderna (CSS aspect-ratio):
.container { aspect-ratio: 16 / 9; width: 100%;
}Abordagem legada (truque padding-bottom):
.container { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 = 9/16 = 56.25% */
}
.container > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}Recursos Úteis
Wikipedia: Proporção de Aspecto Introdução amigável para iniciantes sobre proporções de aspecto em imagens e vídeo
MDN: Propriedade CSS aspect-ratio Propriedade CSS moderna para manter proporções de aspecto
Smashing Magazine: Aspect Ratio em CSS Guia completo para manter proporções de aspecto em CSS moderno
W3C CSS Box Sizing Module Especificação oficial para CSS aspect-ratio
Nova Propriedade CSS Aspect-Ratio Guia do Google web.dev sobre tratamento moderno de proporção de aspecto