Calculadora de proporção de imagem
Informe as dimensões originais e altere a largura ou altura desejada. O resultado traz medidas proporcionais e um trecho CSS.
Funciona localmente no seu navegador ·
16:9
Informe as dimensões originais e altere a largura ou altura desejada. O resultado traz medidas proporcionais e um trecho CSS.
Funciona localmente no seu navegadorEntram duas medidas em pixels e saem três coisas: a proporção reduzida, um segundo tamanho com a mesma proporção e uma declaração CSS para o elemento que precisa manter a forma. É aritmética com números: nenhuma imagem é aberta, redimensionada ou enviada.
Todos os campos recalculam enquanto você digita. A largura e a altura de origem definem a proporção, e o campo de destino que você editar recalcula o outro lado, então a proporção se mantém mesmo durante a digitação.
A proporção reduzida divide as medidas de origem pelo máximo divisor comum: 1920 × 1080 vira 16:9 e 1366 × 768 vira 683:384, porque esses números não têm divisor menor em comum. O tamanho proporcional é o par de destino arredondado para pixels inteiros. A proporção decimal é largura ÷ altura com seis casas (1.777778 em 16:9). O preenchimento alternativo é altura ÷ largura em porcentagem — 56.2500 % para 16:9 —, o valor que a técnica de padding percentual usa.
Copiar CSS grava aspect-ratio: 16 / 9; para declarar a forma, width: 100%; para o elemento ocupar a coluna e uma linha padding-top comentada como alternativa. Mantenha a linha de padding quando a mesma folha precisar funcionar em um motor que ignora a propriedade aspect-ratio; apague o bloco de comentário quando não precisar. Como o trecho usa o par reduzido, uma proporção como 683:384 aparece como foi calculada.
O par usa apenas números inteiros: uma medida decimal é arredondada para o inteiro mais próximo antes do máximo divisor comum, enquanto a proporção decimal e a porcentagem de padding mantêm o que você digitou. As predefinições também são reduzidas, e por isso 21:9 aparece como 7:3, a mesma proporção na forma mínima. As duas medidas de origem precisam ser maiores que zero; se uma estiver vazia, for zero ou negativa, a linha de status avisa e o último resultado válido continua na tela.
Porque toda proporção é exibida na forma irredutível: 21 e 9 se dividem por 3, então 21:9 vira 7:3. A proporção é a mesma, e aspect-ratio: 7 / 3 calcula a mesma caixa que aspect-ratio: 21 / 9.
Qualquer um. Editar a largura recalcula a altura e editar a altura recalcula a largura; escolha o lado que o layout realmente limita, como uma coluna de largura fixa ou uma altura fixa de 600 px.
Ele sai como linha comentada e não custa nada. aspect-ratio declara a forma em uma propriedade e o padding percentual é a técnica antiga que alcança motores que ignoram essa propriedade. Apague o comentário apenas se todos os navegadores-alvo a suportarem.
Sim. O par reduzido usa os inteiros arredondados — 1920,5 × 1080,25 aparece como 1921:1080 —, enquanto a proporção decimal (1.777829) e a porcentagem de padding usam os números sem arredondar.
Não. Ela calcula apenas números e CSS; o arquivo não é aberto. Use o redimensionador de imagens quando os pixels precisarem mudar e esta página para o contêiner que os exibe.