# Calculadora de aspect ratio

> Descubra a largura ou a altura a partir de uma proporção e leve o aspect-ratio pronto para o CSS.

URL: https://dpw.dev/ferramentas/calculadora-aspect-ratio/

Informe a proporção e uma das medidas: a calculadora devolve a outra e o `aspect-ratio` pronto para o CSS.

Esta página tem uma calculadora interativa no navegador. Exemplo: 1.920px de largura em 16:9 dá 1.080px de altura. O CSS correspondente:

```css
.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 px |
| 4:3 | TV antiga, iPad e câmeras compactas | 1.024 × 768 px |
| 1:1 | Avatares e posts quadrados | 1.080 × 1.080 px |
| 9:16 | Stories, Reels e vídeos verticais | 1.080 × 1.920 px |
| 3:2 | Fotos de câmeras DSLR e mirrorless | 1.800 × 1.200 px |
| 21:9 | Monitores ultrawide e cinema | 2.520 × 1.080 px |

## 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.

Suporte: funciona em todos os navegadores atuais ([Baseline](https://webstatus.dev/features/aspect-ratio)).

## Leia no blog

- [Layout Shift e CLS: guia completo do deslocamento de layout](https://dpw.dev/ui-ux/deslocamento-layout-shift-cumulative-layout-shift-cls/)

## Conceitos Fundamentais de CSS

Por que a altura de uma caixa depende da largura, e o que mais o navegador calcula sozinho? O livro explica o modelo por trás em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml