Proporção CSS

O que é

Proporção é o formato da caixa: quadrada (1:1) como post do Instagram, 16:9 como vídeo do YouTube, 9:16 como story. Com uma classe ar-* a caixa ganha altura automaticamente a partir da largura, em qualquer tamanho de tela. Coloque a foto dentro com media-fill e ela preenche a caixa sem deformar. Assim todos os cards da grade ficam do mesmo tamanho, mesmo com fotos de formatos diferentes.

É só CSS. Como o navegador já sabe a altura da caixa antes da foto chegar, o texto de baixo não "pula" quando a imagem termina de carregar — isso melhora a nota do site no Google (o item "CLS" do PageSpeed). Vale para foto, vídeo, mapa e vídeo do YouTube (<iframe>).

Quando usar

• Grade de produtos ou notícias com fotos de tamanhos diferentes: todas na mesma caixa, ex.: ar-4-3.
• Vídeo do YouTube ou mapa responsivo: ar-16-9.
• Foto de perfil, post de feed: ar-sq.
• Story, vídeo de celular, cartaz: ar-9-16 ou ar-3-4.
• Faixa de banner larga no topo: ar-2-1 ou ar-21-9.

Comece aqui

1. 1

   Coloque o SW Core no <head>. As classes estão no arquivo principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   A caixa leva a proporção; a foto dentro leva media-fill. Pronto: 16:9 em qualquer tela.

   

   <div class="ar-16-9 r-m ov-hi">
     <img src="/foto.jpg" alt="Montanhas ao pôr do sol" class="media-fill">
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. Deitadas (mais largas que altas)

O primeiro número é a largura, o segundo a altura. Quanto maior a diferença, mais "fininha" a caixa.

2. Quadrada e em pé

Para perfil, feed de rede social, story e cartaz.

3. Com e sem media-fill

A proporção manda na caixa. A foto dentro precisa de media-fill para ocupar a caixa toda.

16:9 reservado

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div class="ar-16-9 r-m ov-hi">
  <iframe class="media-fill" src="https://www.youtube.com/embed/SEU_VIDEO"
          title="Vídeo de apresentação" allowfullscreen loading="lazy"></iframe>
</div>

Grade de produtos com fotos de formatos diferentes, todas iguais Ao vivo

Sapato

Kit viagem

Relógio

Caneca

<div sw-card>
  <div class="ar-4-3">
    <img src="/produto.jpg" alt="Nome do produto" class="media-fill">
  </div>
  <div class="sw-card-bdy"><strong>Nome do produto</strong></div>
</div>

<div class="ar-16-9 r-m ov-hi">
  <iframe class="media-fill" src="https://www.google.com/maps/embed?pb=SEU_CODIGO"
          title="Como chegar" loading="lazy"></iframe>
</div>

Stories de clientes lado a lado Ao vivo

<div class="l l-3 gap-3">
  <div class="ar-9-16 r-m ov-hi">
    <img src="/story-1.jpg" alt="Story 1" class="media-fill">
  </div>
  <!-- …um por story… -->
</div>

Precisa de quê

• swcore.min.css — todas as classes desta página.

Cuidados — erros comuns

• A proporção vai na caixa (a <div>), não na imagem. A imagem leva media-fill.
• Se você der uma altura fixa à caixa no seu CSS (height: 300px), a proporção é ignorada. Deixe a altura sair da proporção.
• Caixa com proporção dentro de uma linha flx sem largura pode ficar com largura zero e sumir. Dê largura a ela (coluna da grade, w-fl ou largura no CSS da página).
• Quando a foto tem outro formato, o media-fill corta as sobras pelo centro. Para escolher o pedaço (ex.: manter o rosto), use as classes da página Object-fit: w-fl h-fl of-cov obp-t.

O que ele não faz

• Só existem as 8 proporções prontas. Para outra (ex.: 5:4), não há classe.
• Se o conteúdo for maior que a caixa (muito texto dentro), a caixa cresce e perde a proporção. Para foto e vídeo isso não acontece.