Calculadora de Proporção

Entendendo as Proporções

A proporção (ou relação de aspecto) é a relação proporcional entre a largura e a altura de uma imagem ou vídeo, expressa como dois números separados por dois-pontos. 16:9 significa que para cada 16 pixels de largura existem 9 pixels de altura. As proporções são adimensionais — 1920×1080 e 1280×720 são ambas 16:9 porque compartilham a mesma proporção.

Proporções Comuns e Seus Usos

• 16:9 (1,78:1) — O padrão universal para vídeo widescreen: YouTube, Netflix, Vimeo, Twitch, transmissões de TV, monitores de desktop e telas de notebook.
• 4:3 (1,33:1) — Padrão antigo de TV e monitor. Ainda usado em apresentações, alguns apps para iPad e vídeos em definição padrão.
• 1:1 — Formato quadrado. Feed do Instagram, fotos de perfil, capas de álbum. Impacto visual forte, igualmente largo e alto.
• 9:16 (0,56:1) — Vídeo vertical para TikTok, Reels e Stories do Instagram, YouTube Shorts. O formato "tela cheia no celular".
• 4:5 (0,8:1) — Posts retratos no feed do Instagram. Mais alto que o quadrado, exibe mais conteúdo sem ficar totalmente vertical.
• 21:9 (2,33:1) — Ultrawide cinematográfico. Usado no cinema (formato scope 2,39:1) e em monitores ultrawide.
• 3:2 (1,5:1) — Fotografia em filme 35mm tradicional e muitas câmeras digitais. Proporções padrão de impressão fotográfica.

Como Manter a Proporção ao Redimensionar

Para escalar uma imagem preservando sua proporção, multiplique ambas as dimensões pelo mesmo fator de escala. Para encontrar uma altura proporcional para uma nova largura: nova altura = (nova largura / largura original) × altura original.

Exemplo: redimensionar 1920×1080 para uma versão com 1280 pixels de largura: 1080 × (1280 / 1920) = 1080 × 0,667 = 720 pixels. O resultado, 1280×720, mantém a proporção 16:9.

Propriedade CSS aspect-ratio

A propriedade CSS aspect-ratio (suportada em todos os navegadores modernos desde 2021) permite declarar a proporção pretendida de um elemento sem precisar conhecer as duas dimensões. Definir aspect-ratio: 16 / 9 em um contêiner e fornecer apenas uma width faz com que o navegador calcule a altura correta automaticamente. Isso substitui as técnicas antigas de hack com porcentagem de padding.

Perguntas Frequentes

• O que é uma proporção?
  Uma proporção descreve a relação proporcional entre a largura e a altura de uma imagem ou vídeo, expressa como dois números (ex.: 16:9). Uma proporção 16:9 significa que a largura tem 16 unidades para cada 9 unidades de altura.
• Qual é a proporção padrão dos vídeos do YouTube?
  A proporção padrão do YouTube é 16:9. Resolução recomendada: 1920×1080 (Full HD). As miniaturas devem ter no mínimo 1280×720 ou, preferencialmente, 1920×1080.
• Quais proporções o Instagram usa?
  O Instagram suporta 1:1 (quadrado, 1080×1080), 4:5 (retrato no feed, 1080×1350) e 9:16 (Stories/Reels, 1080×1920).
• Como manter a proporção ao redimensionar?
  Nova altura = (nova largura / largura original) × altura original. No CSS, use aspect-ratio: 16 / 9 e defina apenas uma dimensão — o navegador calcula a outra automaticamente.
• Quais são as dimensões em pixels de 16:9?
  Resoluções 16:9 comuns: 1280×720 (HD), 1920×1080 (Full HD), 2560×1440 (QHD), 3840×2160 (4K UHD), 7680×4320 (8K UHD). Qualquer dimensão em que largura ÷ altura = 1,778 é 16:9.
• O que faz a propriedade CSS aspect-ratio?
  A propriedade CSS aspect-ratio declara a proporção preferida de um elemento. Definir aspect-ratio: 16 / 9 e apenas uma largura faz com que o navegador calcule a altura automaticamente. Suportada em todos os navegadores modernos desde 2021.