Calculadora de proporção CSS

A proporção, ou relação de aspecto, descreve a relação entre a largura e a altura de um elemento. Ela é escrita com dois números separados por dois-pontos, como 16:9, e permanece igual quando ambas as dimensões são escaladas pelo mesmo fator. Desenvolvedores web usam proporções para reservar espaço estável para imagens, vídeos, incorporações, cartões e componentes responsivos antes de o conteúdo terminar de carregar. Esta calculadora simplifica qualquer par de dimensões inteiras e produz a declaração CSS moderna correspondente. A simplificação usa o máximo divisor comum da largura e da altura. Para 1920 por 1080, ele é 120. Dividir ambas as dimensões por 120 resulta em 16 por 9. O valor decimal é a largura dividida pela altura, então 16:9 vale aproximadamente 1.7778. A propriedade CSS aspect-ratio aceita os números simplificados ou as dimensões originais, mas os valores reduzidos são mais fáceis de reconhecer e revisar. A declaração gerada pode ser colada em uma regra para um contêiner de imagem, quadro de vídeo, item de grade ou outra caixa. A propriedade aspect-ratio fornece uma proporção preferencial. Se o elemento tem largura definida e altura automática, o navegador calcula a altura pela proporção. Se a altura é definida e a largura automática, ele pode calcular a largura. Quando ambas estão explicitamente fixadas, a proporção não as substitui. Conteúdo, tamanhos mínimos e máximos, modelo de caixa e restrições de layout também podem afetar as dimensões finais. Combinar width: 100% com uma proporção é uma forma comum de criar contêineres de mídia responsivos. Proporção não é resolução. Duas imagens podem ser 16:9 e ter quantidades de pixels muito diferentes, como 1280 por 720 e 3840 por 2160. A proporção controla o formato; a resolução influencia detalhes, tamanho de arquivo e densidade de exibição. Recortar uma imagem para outra proporção remove conteúdo; encaixá-la inteira em uma caixa de formato diferente pode deixar espaço vazio. Valores de CSS object-fit, como cover e contain, determinam como o conteúdo substituído se comporta dentro da caixa reservada. Para evitar deslocamentos de layout, use as dimensões intrínsecas do arquivo de origem. Os atributos HTML width e height permitem ao navegador inferir a proporção mesmo quando o CSS responsivo muda o tamanho exibido. Para imagens escolhidas conforme a composição ou pontos de quebra incomuns, confira se cada origem selecionada mantém o enquadramento desejado. Qualquer unidade comum funciona porque só a proporção importa, mas a calculadora pede inteiros para que o máximo divisor comum produza um resultado exato e uma proporção simples e previsível.