Calculadora de Proporção — Dimensões responsivas e código CSS

Recursos

• Calcular largura ou altura ausente a partir da proporção
• Predefinições de proporções comuns (16:9, 4:3, 21:9, 1:1, etc.)
• Gerador do truque CSS padding-bottom
• Múltiplos formatos de proporção (proporção, decimal, porcentagem)
• Calculadora de tamanhos de imagem responsivos
• Cálculo em tempo real
• Processamento 100% no lado do cliente

Casos de Uso Comuns

• Imagens Responsivas: Manter a proporção ao escalar imagens
• Incorporações de Vídeo: Calcular dimensões de iframe para YouTube, Vimeo
• Proporção em CSS: Gerar o truque padding-bottom para navegadores antigos
• Redimensionamento de Imagem: Calcular dimensões de corte ou redimensionamento
• Design de Layout: Planejar layouts de grade responsivos

Técnicas CSS de proporção

Abordagem moderna (CSS aspect-ratio):

.container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Abordagem legada (truque padding-bottom):

.container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 = 9/16 = 56.25% */
}

.container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Recursos Úteis