Proporção CSS

O que é

Classes de aspect-ratio prontas, bom pra Core Web Vitals (CLS) — a caixa reserva o espaço certo antes da imagem chegar.

Como funciona

Cada classe só seta aspect-ratio no contêiner — o navegador já reserva a altura calculada antes da imagem carregar, então não há salto de layout (Cumulative Layout Shift). A imagem/vídeo lá dentro geralmente usa media-fill (ou of-cov) pra preencher essa caixa sem distorcer.

Exemplos

As proporções horizontais Ao vivo

ar-sq — 1:1

ar-4-3

ar-3-2

ar-16-9

<div class="ar-16-9">
  <img src="/foto.jpg" class="media-fill" alt="">
</div>

<!-- .media-fill faz a imagem preencher a caixa sem distorcer -->

Verticais e ultrawide Ao vivo

ar-3-4 — retrato

ar-9-16 — story

ar-21-9 — ultrawide

ar-2-1 — banner largo

<div class="ar-3-4">…</div>    <!-- retrato -->
<div class="ar-9-16">…</div>   <!-- story de celular -->
<div class="ar-2-1">…</div>    <!-- banner -->
<div class="ar-21-9">…</div>   <!-- cinema -->

<!-- reserva o espaço ANTES da imagem existir -->
<div class="ar-16-9">
  <img src="/foto.jpg" class="media-fill" alt="">
</div>

<!-- isso evita o Cumulative Layout Shift (CLS), que o Google mede.
     Vale também pra vídeo e iframe: -->
<div class="ar-16-9">
  <iframe src="https://www.youtube.com/embed/..." style="width:100%;height:100%;border:0"></iframe>
</div>

Escolhendo o que fica visível no corte Ao vivo

padrão — centro

obp-t — topo

obp-b — base

<!-- quando a proporção corta a foto, o Object-fit escolhe o pedaço -->
<div class="ar-sq">
  <img src="/retrato.jpg" class="of-cov obp-t" alt="">
</div>

<!-- útil pra foto de pessoa: obp-t mantém o rosto no quadro -->

Atributos

Nenhum.

Variantes

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

• A proporção manda na caixa. Se a imagem tem outra proporção, ela é cortada (com of-cov) ou sobra espaço (com of-con) — quem decide o recorte é o componente Object-fit.