Calculadora de aspect ratio
Informe a proporção e uma das medidas: a calculadora devolve a outra e o aspect-ratio pronto para o CSS.
Veja
Copie o código
.element {
aspect-ratio: 16 / 9;
}
/* Imagem ou vídeo: preenche a caixa sem distorcer. */
.element:is(img, video) {
inline-size: 100%;
object-fit: cover;
}O problema
Um elemento sem altura definida só descobre a própria altura quando o conteúdo chega. Se uma imagem, um vídeo ou um iframe carrega depois do texto, ele empurra tudo para baixo: é o deslocamento de layout que o CLS, uma das Core Web Vitals, mede.
Por anos, a saída foi o truque do padding: uma caixa vazia com padding-top: 56.25%, porque a porcentagem do padding vertical é calculada sobre a largura. Funcionava, mas pedia um elemento a mais, posicionamento absoluto para o conteúdo e uma conta diferente para cada proporção.
Como funciona
A proporção é a relação entre largura e altura. Sabendo uma das medidas, a outra sai de uma regra de três:
altura = largura ÷ 16 × 9 Troque 16 e 9 pela sua proporção. Para achar a largura, inverta: largura = altura ÷ 9 × 16.
No CSS, a propriedade aspect-ratio faz essa conta sozinha: o navegador usa a largura disponível e calcula a altura. Em <img> e <video>, os atributos width e height já viram uma proporção, então declarar os dois no HTML basta para reservar o espaço antes de o arquivo carregar.
A calculadora também simplifica a proporção: 1920:1080 vira 16:9, porque as duas medidas são divisíveis por 120.
Proporções comuns
| Proporção | Onde aparece | Exemplo |
|---|---|---|
| 16:9 | Vídeo, telas widescreen e miniaturas do YouTube | 1.920 × 1.080 |
| 4:3 | TV antiga, iPad e câmeras compactas | 1.024 × 768 |
| 1:1 | Avatares e posts quadrados | 1.080 × 1.080 |
| 9:16 | Stories, Reels e vídeos verticais | 1.080 × 1.920 |
| 3:2 | Fotos de câmeras DSLR e mirrorless | 1.800 × 1.200 |
| 21:9 | Monitores ultrawide e cinema | 2.520 × 1.080 |
Quando usar
- Grades de cards e miniaturas que precisam ter a mesma altura, venha a imagem que vier.
- Vídeos do YouTube e do Vimeo, mapas e outros iframes, sem o truque do padding.
- Imagens de capa recortadas com
object-fit: cover. - Placeholders e skeletons que reservam o espaço antes de o conteúdo carregar.
Leia no blog
Outras ferramentas
Gerador de quantity queries com :has()
Monte o seletor que muda o layout pelo número de filhos e veja a condição valer na prévia.
TipografiaEscala fluida de tipografia e espaçamento
Gere fontes e espaços com clamp() que crescem com a viewport entre um mínimo e um máximo, sem media queries.
FormasPlayground de corner-shape
Teste squircle, bevel, scoop, notch e superellipse() nos cantos e leve o CSS com border-radius e corner-shape.