Calculadora de Proporção: Entendendo as proporções largura-altura

Domine as proporções de aspecto para vídeo, imagens e design responsivo.

5 min de leitura Conversão · CSS · Vídeo 6 seções + FAQ

A proporção de aspecto é a relação proporcional entre largura e altura. 16:9 é a linguagem universal das telas modernas.

Entender as proporções de aspecto previne os erros de layout mais comuns: imagens esticadas, vídeo com barras pretas e contêineres responsivos quebrados.

O que é proporção de aspecto

Uma proporção de aspecto expressa a relação proporcional entre largura e altura como dois inteiros separados por dois pontos.

Ferramenta gratuita Calculadora de Proporção Calcule dimensões e converta entre proporções instantaneamente

Proporções comuns (16:9, 4:3, 9:16, 1:1, 21:9)

16:9 é o padrão para vídeo HD e YouTube. 4:3 é o antigo padrão de televisão. 9:16 é o retrato móvil. 1:1 é quadrado. 21:9 para cinema.

Calculando dimensões

Para calcular a altura a partir da largura e da proporção: altura = largura × (altura_proporção / largura_proporção). Para 16:9 a 1280px: altura = 720px.

Ferramenta gratuita Conversor de Unidades CSS Converta entre px, rem, em, vh, vw e mais

Propriedade CSS aspect-ratio

A propriedade CSS aspect-ratio impõe dimensionamento proporcional: aspect-ratio: 16 / 9 mantém a proporção 16:9 conforme a largura muda.

Imagens e vídeos responsivos

Para embeds de vídeo responsivos, envolva o iframe em um contêiner com aspect-ratio: 16/9.

Formatos de redes sociais

Cada plataforma tem proporções preferidas: Facebook feed 1.91:1, Instagram feed 4:5 ou 1:1, Instagram Story 9:16, YouTube thumbnail 16:9.

Ferramenta gratuita Conversor PX para REM Converta valores de pixels em unidades rem para design responsivo

Perguntas frequentes

Qual é a proporção de aspecto mais comum para vídeo? +
16:9 é o padrão para vídeo HD e 4K moderno, usado por YouTube, Netflix e a maioria das plataformas de streaming.
Como calculo a altura a partir da largura e da proporção de aspecto? +
Divida o segundo número da proporção pelo primeiro, depois multiplique pela largura. Para 16:9 a 1920px: 9/16 × 1920 = 1080px.
O que é a propriedade CSS aspect-ratio? +
A propriedade CSS aspect-ratio define uma proporção de aspecto preferida para um elemento.
Qual é a melhor proporção para o Instagram? +
Para posts do feed, 4:5 é recomendado. Para Stories e Reels, use 9:16.
Qual é a diferença entre 16:9 e 16:10? +
16:10 é ligeiramente mais alto que 16:9, comum em laptops no início dos anos 2000.
Como manter a proporção de aspecto em CSS responsivo sem a propriedade aspect-ratio? +
Use o truque de padding-top percentual: defina position: relative no contêiner.
Por que alguns monitores usam 21:9? +
21:9 (ultrawide) fornece um campo de visão mais amplo para gaming e edição de vídeo.