Como usar
- Para redimensionar, informe a proporção (por exemplo, 16 e 9) ou escolha uma proporção comum. Depois, digite a largura ou a altura para calcular a outra dimensão.
- Para encontrar uma proporção, informe a largura e a altura de uma imagem, tela ou vídeo.
- Confira a prévia e copie a regra aspect-ratio do CSS, se precisar dela no layout de uma página.
Como funciona
O redimensionamento proporcional usa altura = largura × altura da proporção ÷ largura da proporção (e o inverso). As dimensões em pixels geralmente são números inteiros, então o resultado pode ser arredondado; quando a proporção não resulta em um número inteiro, como 16:9 com largura de 1000, a altura arredondada (563) é uma aproximação, não uma correspondência exata.
Uma dimensão é simplificada dividindo os dois lados pelo máximo divisor comum: 1920 e 1080 são divisíveis por 120, resultando em 16:9. Algumas dimensões reais não correspondem a uma proporção conhecida. 1366×768 equivale exatamente a 683:384, muito próximo de 16:9, por isso a ferramenta também mostra a proporção comum mais próxima quando a diferença é de até 2%. Da mesma forma, monitores “21:9” são, na verdade, 64:27 (2560×1080) ou 43:18 (3440×1440); 21:9 é um nome de marketing.
No CSS, aspect-ratio: 16 / 9 mantém a forma de um elemento quando sua largura muda. Isso é útil para incorporar vídeos e usar espaços reservados para imagens que não devem deslocar o layout enquanto carregam.
Exemplos
Dimensões de miniatura de vídeo
Uma miniatura de vídeo em 16:9 com 1280 pixels de largura precisa ter 720 pixels de altura.
Identificar a proporção de uma tela
2560×1600 simplifica para 8:5, equivalente a 16:10, proporção comum em notebooks.
Corte vertical para redes sociais
Com proporção de 4:5 e largura de 1080, a altura é 1350, uma dimensão vertical aceita por muitos feeds.
Perguntas frequentes
16:9 é o mesmo que 1,78:1?
Sim. 16 ÷ 9 ≈ 1,778, então as duas formas descrevem o mesmo formato. Os formatos de cinema costumam ser expressos em números decimais, como 2,39:1.
Por que o resultado tem casas decimais?
Nem toda largura pode ser dividida pela proporção sem deixar resto. Ative o arredondamento para obter dimensões em pixels inteiros. O resultado será o pixel inteiro mais próximo, então a proporção pode diferir um pouco da exata.
A propriedade aspect-ratio do CSS funciona em todos os navegadores?
A propriedade é compatível com todos os principais navegadores atuais. Se um elemento também tiver largura e altura definidas explicitamente, esses valores terão prioridade sobre aspect-ratio.
Privacidade
Todos os cálculos são feitos no seu navegador. Nenhum dado é enviado ou armazenado.