O que é proporção (aspect ratio)?

A proporção é a relação proporcional entre a largura e a altura de um elemento, expressa como dois números separados por dois-pontos (ex. 16:9 ou 4:3). Descreve a forma de um retângulo.

Como é calculada a proporção?

A proporção é calculada dividindo ambas as dimensões pelo Máximo Divisor Comum (MDC). Por exemplo, 1920×1080: MDC(1920, 1080) = 120, então 1920÷120 = 16 e 1080÷120 = 9, dando 16:9.

Quais são as proporções mais comuns?

16:9 é o padrão para vídeo widescreen e a maioria dos monitores modernos. 4:3 era o padrão para TVs antigas. 1:1 é quadrado, popular no Instagram. 21:9 é ultrawide cinematográfico. 9:16 é orientação vertical para Stories.

O que é a propriedade CSS aspect-ratio?

A propriedade CSS `aspect-ratio` define uma proporção preferida para um elemento. Exemplo: `aspect-ratio: 16 / 9` mantém proporções 16:9. Suportada em todos os navegadores modernos desde 2021.

Como manter a proporção ao redimensionar imagens em CSS?

Use `object-fit: cover` ou `object-fit: contain` em elementos dentro de um contêiner de tamanho fixo. Alternativamente, use `aspect-ratio: 16/9; width: 100%;` diretamente na imagem ou contêiner.

Qual proporção usar para redes sociais?

Proporções comuns: Instagram feed = 1:1 ou 4:5. Stories/Reels = 9:16. YouTube = 16:9. Twitter = 16:9. Facebook = 1.91:1. Pinterest = 2:3. Em caso de dúvida, 16:9 funciona para a maioria das plataformas.

Diferença entre proporção e resolução?

A resolução refere-se às dimensões reais em pixels (ex. 1920×1080). A proporção é a relação proporcional, independente do tamanho. Várias resoluções podem compartilhar a mesma proporção: 1280×720, 1920×1080 e 3840×2160 têm todas 16:9.

Aspect Ratio

Calcule e mantenha proporções para imagens, vídeos e telas.

Cálculo automáticoPresets comunsBloquear proporção

① Insira largura e altura ② Ou escolha um preset ③ Copie o CSS

Padrão

Social

Proporção personalizada:

Largura (px)

Altura (px)

16:9

Proporção

16:9

Dimensões

1920×1080

Proporção decimal

1.7778

Saída CSS

aspect-ratio: 16 / 9;
padding-top: 56.2500%; /* legacy fallback */
width: 1920px;
height: 1080px;

Continuar com

▸Px para RemConverter unidades CSS 64Ferramenta Base64Codificar e decodificar ↓SVG para PNGConverter arquivos vetoriais

O que é proporção e por que importa?

A proporção é a relação proporcional entre largura e altura de um elemento, expressa como L:H — por exemplo 16:9, 4:3, 1:1 ou 9:16. É fundamental para produção de vídeo, fotografia e design web responsivo. O CSS moderno aplica proporções com a propriedade aspect-ratio (ex. aspect-ratio: 16 / 9), substituindo o antigo truque padding-top (padding-top: 56.25%). Casos de uso: miniaturas YouTube (1280×720, 16:9), posts Instagram (1080×1080, 1:1), TikTok e Stories (1080×1920, 9:16), imagens Open Graph (1200×630), banners LinkedIn (1200×627).

Perguntas frequentes

A proporção é a relação proporcional entre largura e altura. Proporções comuns: 16:9, 4:3, 1:1, 21:9, 9:16.

Altura = largura × (altura proporção ÷ largura proporção). Exemplo: 16:9 a 1920px → 1080px.

16:9 é o padrão para vídeo widescreen, monitores modernos e miniaturas do YouTube.

CSS moderno: `aspect-ratio: 16 / 9`. Navegadores antigos: `padding-top: 56.25%`.

Proporção é adimensional (ex. 16:9). Resolução é o número real de pixels (1920×1080).

Em HTML5, use width e height em <img>. Adicione max-width: 100%; height: auto em CSS.

Post Instagram: 1:1. Story/TikTok: 9:16. Twitter: 3:1. YouTube: 16:9 (1280×720). Open Graph: 1200×630.

O que é proporção e por que importa?

Perguntas frequentes

Explore a nossa rede