search

Found

info Visão geral

Converte qualquer proporção largura:altura no percentual de padding-top para caixas responsivas, com o trecho herdado e uma versão aspect-ratio.

📘 Como usar

  1. Escolha uma proporção predefinida ou digite um valor personalizado de W e H
  2. Leia o percentual de padding-top e confira a pré-visualização
  3. Selecione o trecho herdado ou a versão aspect-ratio conforme o seu projeto

Calculadora de padding CSS por proporção

W
:
H
16:9 — 56.25%

Valor de padding-top

56.25 %

CSS (truque padding-top)

.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.aspect-ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

CSS moderno (aspect-ratio)

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

grid_view Relacionados

Article

Calculadora de padding CSS por proporção | Percentual de padding-top de qualquer proporção

Informe uma proporção largura:altura e obtenha o percentual de padding-top usado pelo truque clássico de caixa responsiva. A ferramenta mostra lado a lado o trecho herdado baseado em position e uma versão moderna com aspect-ratio, com uma pré-visualização para confirmar o formato antes de copiar.

💡 Sobre esta ferramenta

  • Da proporção ao percentual: Converte proporções como 16:9 ou 4:3 em um valor como padding-top: 56.25%. Sem precisar calcular à mão altura ÷ largura × 100.
  • Dois trechos no mesmo lugar: Mostra o truque do padding-top (funciona em navegadores antigos) e a propriedade aspect-ratio, mais curta. Escolha o que corresponde à compatibilidade do seu projeto.
  • Pré-visualização do formato: Um quadro de pré-visualização exibe as proporções reais da relação informada, para verificar o resultado de relance.
  • Seis predefinições: 16:9, 4:3, 1:1, 21:9, 3:2 e 9:16 estão a um clique, cobrindo vídeos incorporados, miniaturas quadradas, banners ultralargos e vídeo vertical.

🧐 Perguntas frequentes

Q. Por que o padding-top mantém uma proporção?

R. No CSS, o padding em porcentagem é calculado em relação à largura do bloco que o contém, não à altura. Assim, padding-top: 56.25% reserva uma altura igual a 56,25% da largura do elemento, e essa relação se mantém mesmo quando a largura muda. O truque do padding-top explora exatamente essa peculiaridade.

Q. Se o aspect-ratio existe, por que manter o truque antigo?

R. A propriedade aspect-ratio resolve o problema em uma linha, mas não tem efeito em navegadores antigos. Em intranets, dispositivos embarcados ou qualquer ambiente com uma matriz de navegadores limitada, o truque do padding-top continua sendo a opção confiável. Compare os dois trechos e adote o que se ajusta aos seus alvos de compatibilidade.

Q. Como ajusto um iframe ou uma imagem à proporção?

R. Com o truque do padding-top, defina a caixa externa como position: relative e fixe o filho com position: absolute, top/left: 0 e width/height: 100%. O trecho gerado por esta ferramenta já inclui essa estrutura, então você pode colocar um iframe ou um img diretamente dentro.

Q. O que acontece com proporções que não dividem de forma exata?

R. Uma relação como 3:2 resulta em um decimal periódico, como 66,6666…%. A ferramenta mantém apenas as casas decimais necessárias, de modo que o erro de arredondamento é desprezível na prática.

📚 Curiosidades

O truque do padding-top se popularizou depois que Thierry Koblentz o documentou como "Intrinsic Ratios in Web Design" no A List Apart, em 2009. Numa época em que o CSS não tinha forma nativa de expressar uma proporção, a técnica se apoiava em um detalhe pouco conhecido da especificação — o fato de o padding em porcentagem ser relativo à largura — e tornou-se a maneira canônica de deixar vídeos incorporados responsivos.

Mais de uma década depois, os navegadores implementaram a propriedade nativa aspect-ratio, com suporte estável nos principais motores por volta de 2021. Ainda assim, o truque não se aposentou de vez: entender como ele funciona continua útil ao ler bases de código antigas ou ao dar suporte a navegadores que ficam atrás do padrão.