Proporções de Tela: Por Que Elas Importam em Vídeo, Foto e Design

Uma proporcao de aspecto e a relacao proporcional entre largura e altura. Ela determina o formato de cada tela, foto e quadro de video que voce ve. Acertar isso importa: quando a proporcao nao bate, surgem barras pretas, imagens esticadas ou rostos cortados - por isso designers e desenvolvedores precisam entender como as proporcoes funcionam.

O que e uma proporcao de aspecto?

Uma proporcao de aspecto e expressa como largura : altura em seus menores numeros inteiros. Uma tela 1920x1080 simplifica para 16:9 porque ambos os numeros sao divisiveis por 120. A proporcao informa o formato sem especificar o tamanho - uma tela 16:9 pode ter 5 polegadas ou 65 polegadas.

A matematica para simplificar e: dividir as duas dimensoes pelo seu maximo divisor comum (MDC). Para 1920 e 1080, o MDC e 120, resultando em 16:9.

Proporcoes de aspecto comuns e de onde elas vieram

16:9 - o padrao moderno

Usada por praticamente todas as TVs, monitores e videos da web desde meados dos anos 2000. Foi escolhida como um compromisso matematico entre a antiga proporcao da TV (4:3) e o cinema widescreen (2.35:1). Resolues comuns: 1280x720 (HD), 1920x1080 (Full HD), 3840x2160 (4K).

4:3 - o classico

A proporcao original das TVs e dos monitores de computador. Ainda e usada em telas de iPad, muitos formatos de documentos e slides de apresentacao. Resolues comuns: 640x480, 1024x768, 2048x1536.

1:1 - o quadrado

O Instagram popularizou o formato quadrado nas redes sociais. Ele ocupa o maximo de espaco nos feeds mobile porque os celulares sao altos e estreitos. Tamanhos comuns: 1080x1080, 2048x2048.

9:16 - video vertical

TikTok, Instagram Reels, YouTube Shorts - o video vertical e um 16:9 girado 90 graus. Resolucao comum: 1080x1920.

21:9 - ultrawide

Usada por monitores ultrawide e conteudo cinematografico. Aproxima a proporcao widescreen anamorfica 2.35:1 usada em filmes de Hollywood. Resolues comuns: 2560x1080, 3440x1440.

Escalonamento proporcional

A propriedade-chave das proporcoes de aspecto: se voce conhece a proporcao e uma das dimensoes, consegue calcular a outra. A formula:

• Dada a largura: altura = largura x (ratioH / ratioW)
• Dada a altura: largura = altura x (ratioW / ratioH)

Para uma imagem 16:9 escalada para 1280px de largura: 1280 x (9/16) = 720px de altura.

Guia rapido de proporcoes para redes sociais

• Post do Instagram: 1:1 (1080x1080) ou 4:5 (1080x1350)
• Story / Reels do Instagram: 9:16 (1080x1920)
• Thumbnail do YouTube: 16:9 (1280x720)
• Post no Twitter/X: 16:9 (1200x675) ou 2:1
• Capa do Facebook: ~2.7:1 (820x312)
• Banner do LinkedIn: 4:1 (1584x396)

O que acontece quando as proporcoes nao combinam

Quando o conteudo e o container tem proporcoes de aspecto diferentes, tres coisas podem acontecer:

• Letterboxing - barras pretas em cima/embaixo (conteudo largo em container alto)
• Pillarboxing - barras pretas nas laterais (conteudo alto em container largo)
• Cropping - as bordas sao cortadas para preencher o container (modo cover)

No CSS, object-fit: contain cria letterboxing, object-fit: cover corta, e object-fit: fill distorce (geralmente a escolha errada).