Calculadora de proporção (aspect ratio)

Como usar a calculadora de proporção

1. Escolhe uma das Proporções comuns (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) ou escreve os teus próprios valores em Proporção ou tamanho original. Podes introduzir uma proporção (16 e 9) ou as dimensões reais de uma imagem, vídeo ou ecrã (1920 e 1080).
2. Lê os resultados: a Proporção simplificada, a Proporção decimal (largura a dividir pela altura), a Orientação e o Formato padrão mais próximo. O sinal «≈» indica que o teu tamanho está perto desse formato, mas não coincide exatamente.
3. Em Novo tamanho (mantém a proporção), escreve uma Nova largura para obter a altura correspondente, ou uma Nova altura para obter a largura. A linha por baixo mostra o cálculo. Desmarca Arredondar a píxeis inteiros se precisares do valor exato, por exemplo para tamanhos de impressão em milímetros.
4. Trocar largura e altura passa uma proporção de paisagem para retrato (16:9 passa a 9:16) e vice-versa.
5. A Pré-visualização desenha uma caixa com a tua proporção, e a tabela indica o tamanho de cada proporção comum com a tua nova largura.
6. Copia o Código CSS com Copiar.

Como funciona o cálculo

Uma proporção é a largura dividida pela altura, escrita como dois números inteiros. Para a simplificar, a ferramenta divide os dois lados pelo máximo divisor comum (MDC): o MDC de 1920 e 1080 é 120, por isso 1920:1080 = 16:9. Os valores decimais são primeiro multiplicados por uma potência de dez (2,39:1 passa a 239:100).

Para redimensionar mantendo as proporções, basta uma regra de três simples:

• nova altura = nova largura × altura original ÷ largura original
• nova largura = nova altura × largura original ÷ altura original

Exemplo: um vídeo 16:9 com 1280 px de largura tem 1280 × 9 ÷ 16 = 720 px de altura.

Alguns ecrãs têm proporções «estranhas». Um portátil de 1366 × 768 simplifica para 683:384, ou seja 1,779:1, a um fio de 16:9 (1,778:1), daí o «≈ 16:9». Os monitores vendidos como 21:9 são na realidade 64:27 (2560 × 1080) ou 43:18 (3440 × 1440), e é por isso que ambos aparecem na tabela.

A propriedade CSS aspect-ratio

aspect-ratio: 16 / 9; diz ao navegador para calcular a dimensão em falta: com width: 100%, a altura acompanha automaticamente e a caixa ajusta-se ao contentor. Funciona em todos os navegadores atuais (desde 2021) e é ideal para vídeos incorporados, cartões, marcadores de posição de imagens e miniaturas. Combina-a com object-fit: cover nas imagens para as recortar em vez de as esticar.

O código inclui também a técnica antiga do padding-top como alternativa: um padding em percentagem é calculado a partir da largura, por isso padding-top: 56.25% (9 ÷ 16) reserva uma área 16:9, e o conteúdo é posicionado de forma absoluta lá dentro. Só precisas dela para navegadores muito antigos.

Reservar o espaço com uma proporção evita também saltos no layout enquanto as imagens e os vídeos carregam, o que melhora a pontuação de Cumulative Layout Shift (CLS).