Calculadora de Aspect Ratio

Calculadora de proporção de tela e imagem para vídeo, design e web. Calcule resolução mantendo a proporção, descubra o aspect ratio de qualquer arquivo, gere CSS pronto e veja barras de letterbox. Grátis, sem cadastro.

:

Comuns

Redes sociais

Impressão e papel

Cinema e vídeo

1920 × 1080
Proporção das dimensões: 16:9

Largura (px)

1920

Altura (px)

1080

Megapixels

2.07

Código pronto para usar

CSS aspect-ratio:
aspect-ratio: 16 / 9;
HTML <img> (anti-CLS):
<img src="..." width="1920" height="1080" alt="">
CSS iframe responsivo:
.embed { position: relative; width: 100%; padding-bottom: 56.25%; } .embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

Baixar guia PNG

Gera uma imagem PNG na proporção exata selecionada, limpa e sem marcações. Útil como template de enquadramento ou base de design. O lado maior tem 2048px.

Sobre esta ferramenta

Calculadora de aspect ratio online e gratuita para quem trabalha com vídeo, design e desenvolvimento web. A ferramenta resolve a regra de três entre uma proporção (16:9, 4:3, 1:1, 21:9 e dezenas de outras) e os campos de largura e altura: você digita uma dimensão e a outra é calculada na hora, mantendo a proporção da imagem intacta. Também é possível descobrir o aspect ratio de qualquer resolução existente — basta informar largura e altura que a ferramenta reduz automaticamente para a proporção mínima. Além do cálculo, ela entrega o código CSS pronto para colar no projeto, um preview que muda de tamanho em tempo real e um cálculo de letterbox para saber quanto de barra preta sobra ao encaixar um conteúdo dentro de um container de proporção diferente. Tudo roda no navegador, sem cadastro.

Funcionalidades

Calcula largura ou altura mantendo a proporção
Dezenas de presets por contexto: redes sociais, cinema e impressão
Gera código CSS aspect-ratio, atributos de imagem anti-CLS e iframe responsivo
Cálculo de letterbox e pillarbox para encaixe em containers
Baixa guia PNG na proporção exata e preview que reage em tempo real

Como o cálculo de proporção funciona

A proporção de tela é a relação entre largura e altura, escrita como dois números separados por dois pontos. Em 16:9, por exemplo, para cada 16 unidades de largura há 9 de altura. O cálculo é uma regra de três simples: a altura sai de largura × (9 ÷ 16) e a largura, de altura × (16 ÷ 9). Para descobrir a proporção de uma imagem qualquer, divide-se largura e altura pelo maior divisor comum entre os dois, o que reduz, por exemplo, 1920×1080 para a forma mínima 16:9. É esse mesmo princípio que a calculadora aplica para manter qualquer redimensionamento sem distorção.

Casos de Uso

Os usos mais comuns da calculadora de proporção no dia a dia de quem produz conteúdo visual e código são:

  • Edição e exportação de vídeoConverter um master 4K para HD, configurar resoluções de saída e descobrir a altura correta de um corte widescreen sem deformar a imagem.
  • Banners e layout responsivoDefinir a altura de um banner a partir de uma largura fixa e gerar o CSS aspect-ratio que mantém a proporção em qualquer tela.
  • Conteúdo para redes sociaisAcertar Story e Reels 9:16 (1080×1920px), feed Instagram 4:5 (1080×1350px) e thumbnail YouTube 16:9 (1280×720px) antes de exportar, evitando cortes indesejados na publicação.
  • Vídeo embeddado responsivoGerar o padrão de iframe com padding proporcional para incorporar players de vídeo que se adaptam à largura do container.
  • Performance e Core Web VitalsPreencher os atributos width e height de imagens para reservar espaço no layout e reduzir o deslocamento cumulativo (CLS).
  • Impressão e diagramaçãoCalcular dimensões proporcionais para A4, fotos e materiais impressos a partir de uma medida conhecida.

Como Usar

1

Escolha a proporção

Digite os dois números da proporção ou clique em um dos presets organizados por contexto. O preview e o código se atualizam na hora.

2

Informe uma dimensão

Preencha a largura ou a altura. O campo oposto é calculado automaticamente mantendo a proporção escolhida.

3

Copie o código

Use os botões de cópia para levar o CSS aspect-ratio, os atributos de imagem ou o iframe responsivo direto para o seu projeto.

4

Cheque o letterbox (opcional)

Ative o cálculo de barras, informe o tamanho do container e veja quanto de barra preta sobra ao encaixar o conteúdo.

Perguntas e Respostas

O que significa aspect ratio?

Aspect ratio, ou proporção de tela, é a relação entre a largura e a altura de uma imagem, vídeo ou tela. É escrita como dois números separados por dois pontos, como 16:9 ou 4:3. O primeiro número representa a largura proporcional e o segundo, a altura. Uma proporção 16:9 não diz o tamanho real em pixels, apenas que a largura é sempre 16/9 vezes maior que a altura, seja num vídeo de 1280×720 ou de 3840×2160.

Como calcular a altura a partir da largura mantendo a proporção?

Basta multiplicar a largura pela altura da proporção e dividir pela largura da proporção. Para uma largura de 1200px em 16:9, a conta é 1200 × 9 ÷ 16, que resulta em 675px de altura. A calculadora faz isso automaticamente: você escolhe a proporção, digita a largura e a altura aparece já calculada. O caminho inverso, achar a largura a partir da altura, segue a mesma lógica trocando os termos.

Qual a diferença entre 16:9, 4:3 e 21:9?

São proporções com formatos diferentes. 4:3 é quase quadrado, padrão das TVs e monitores antigos. 16:9 é o widescreen atual, usado em quase todo vídeo online, TV e celular na horizontal. 21:9 é o ultrawide, mais alongado, comum em monitores de produtividade e em filmes com pegada cinematográfica. Quanto maior a diferença entre os dois números, mais alongada e panorâmica é a imagem.

O que é letterbox e pillarbox?

São as barras pretas que aparecem quando um conteúdo é exibido num espaço de proporção diferente, sem cortar nada. Letterbox são as barras horizontais em cima e embaixo, comuns ao assistir um filme widescreen numa tela mais quadrada. Pillarbox são as barras verticais nas laterais, que surgem ao exibir um vídeo mais quadrado numa tela widescreen. A calculadora informa exatamente quantos pixels de barra sobram em cada caso.

Como usar aspect-ratio no CSS?

A propriedade aspect-ratio do CSS reserva o espaço de um elemento na proporção desejada sem precisar fixar a altura. Para um bloco 16:9, basta escrever aspect-ratio: 16 / 9 que o navegador calcula a altura a partir da largura disponível. É a forma moderna de manter proporções responsivas e substitui o antigo truque do padding-bottom percentual. A calculadora gera essa linha já com os valores da proporção selecionada.

Veja também