Como usar: Calculadora de Proporção
- Digite uma proporção (ou clique em uma comum, como 16:9 ou 9:16).
- Informe uma largura para obter a altura correspondente — ou uma altura para obter a largura.
- Para descobrir a proporção de uma imagem ou tela existente, digite o tamanho em Descubra a proporção de um tamanho; clique em Usar esta proporção para redimensionar com ela.
- Copie o CSS (
aspect-ratiocom o fallback de padding-top) e escolha um tamanho padrão na tabela.
O que é proporção de imagem?
A proporção de imagem é a relação entre largura e altura, escrita como largura:altura. Um vídeo de 1920 × 1080 e outro de 1280 × 720 têm tamanhos diferentes, mas a mesma proporção 16:9, então um pode ser escalado para o outro sem esticar ou cortar. Manter a proporção ao redimensionar é o que evita imagens distorcidas e barras pretas.
Fórmulas de proporção
- Nova altura = nova largura × altura da proporção ÷ largura da proporção — ex.: 1280 × 9 ÷ 16 = 720.
- Nova largura = nova altura × largura da proporção ÷ altura da proporção — ex.: 1080 × 16 ÷ 9 = 1920.
- Simplificar um tamanho: divida os dois lados pelo máximo divisor comum (MDC). 1920 e 1080 têm MDC 120, resultando em 16:9.
Alguns tamanhos não simplificam de forma limpa: 1366 × 768 (uma resolução comum em notebooks) se reduz a 683:384, que é aproximadamente 16:9. A calculadora mostra a proporção exata e a proporção comum mais próxima.
Proporções comuns e onde são usadas
| Proporção | Decimal | Uso típico |
|---|---|---|
| 16:9 | 1.778 | Vídeo HD/4K, YouTube, monitores, apresentações |
| 9:16 | 0.5625 | Stories, Reels, TikTok, YouTube Shorts |
| 4:3 | 1.333 | TVs e monitores antigos, iPad, muitas câmeras compactas |
| 3:2 | 1.5 | Filme 35 mm, fotos de DSLR/mirrorless, notebooks Surface |
| 1:1 | 1 | Posts quadrados em redes sociais, avatares, miniaturas de produtos |
| 4:5 | 0.8 | Posts em retrato no feed do Instagram e Facebook |
| 21:9 | ≈ 2.33 | Monitores ultrawide, vídeo cinematográfico |
| 1.91:1 | 1.91 | Imagens Open Graph / prévia de links (1200 × 630) |
Proporção de imagem em CSS
Navegadores modernos suportam a propriedade aspect-ratio: aspect-ratio: 16 / 9; em um elemento com largura define a altura correspondente — ideal para embeds de vídeo responsivos, cards e placeholders de imagem que evitam deslocamento de layout (bom para o CLS dos Core Web Vitals). A técnica mais antiga é o padding-top hack: um wrapper com height: 0; padding-top: 56.25% (9 ÷ 16 × 100), porque percentuais de padding vertical são relativos à largura do elemento. Ambos são gerados acima. Para os arquivos de imagem em si, use o Redimensionador de Imagens; para prévias de links, o Gerador de Imagem OG cria imagens de 1200 × 630.
Também pesquisado como: proporção de imagem, calculadora 16:9, calculadora de resolução, proporção de vídeo, aspect ratio css, padding-top hack, proporção 4:3.
Ferramentas que combinam com: Calculadora de Proporção
- Calculadora de braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
- Conversor PX para REM — Converta entre pixels, rem e em usando o tamanho de fonte raiz do seu projeto — ou cole uma folha de estilo inteira e converta todos os valores px de uma vez.
- Calculadora de porcentagem — Sete cálculos de porcentagem do dia a dia em uma única página.
- Conversor de algarismos romanos — Converte qualquer número de 1 a 3.999.999 em algarismos romanos — ou transforma algarismos romanos de volta em números — com uma explicação detalhada de cada símbolo.
Perguntas frequentes
Como calcular a altura a partir da largura e da proporção?
1920×1080 é 16:9?
Qual é a proporção de 1080×1350?
Qual é o valor de padding-top para 16:9?
Devo usar aspect-ratio ou o padding hack no CSS?
aspect-ratio; ele é suportado por todos os navegadores atuais e não precisa de wrapper. Mantenha o padding hack apenas se precisar oferecer suporte a navegadores muito antigos, como Safari anterior à versão 15.