Object-fit CSS

O que é

Toda hora uma foto tem um formato e a caixa do site tem outro: foto deitada num quadrado de perfil, retrato num banner largo. As classes of-* dizem como a imagem se ajeita dentro da caixa, sem ficar deformada: of-cov preenche e corta as sobras (o mais usado), of-con mostra a foto inteira e deixa sobrar espaço. As classes obp-* escolhem qual parte fica aparecendo quando corta — por exemplo, o topo, para não cortar o rosto de uma pessoa.

É só CSS, e vale para <img> e <video>. Para funcionar, a imagem precisa de uma caixa com largura e altura e ocupar essa caixa toda (w-fl h-fl). O jeito mais fácil de dar altura à caixa é uma proporção pronta: ar-sq, ar-16-9… (página Proporção).

Quando usar

• Foto de produto, notícia ou capa numa grade de cards todos iguais: of-cov.
• Logo de cliente ou produto recortado que não pode perder nenhum pedaço: of-con.
• Foto de pessoa numa caixa mais larga que alta: of-cov obp-t (mantém o rosto).
• Vídeo de fundo de uma seção, sem faixa preta: of-cov no <video>.

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

   Uma caixa com proporção (aqui quadrada) e a foto ocupando ela toda, com o modo de encaixe. A foto é deitada; a caixa é quadrada: o of-cov corta as laterais.

   

   <div class="ar-sq r-m ov-hi">
     <img src="/paisagem.jpg" alt="Paisagem" class="w-fl h-fl blk of-cov">
   </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. Os 5 modos de encaixe

A mesma foto deitada (16:9) dentro de uma caixa quadrada. Muda só a classe of-* da imagem.

2. Qual pedaço aparece (obp-*)

Com of-cov uma parte da foto some. O obp-* escolhe o que fica: t topo, b baixo, l esquerda, r direita, c centro. Aqui, uma foto em pé dentro de uma caixa larga.

3. Os quatro cantos

Os cantos juntam as duas letras: tl topo-esquerda, tr topo-direita, bl baixo-esquerda, br baixo-direita. Faz diferença quando a foto sobra nos dois sentidos (ex.: com of-non).

Tabela de opções

Receitas prontas — usos reais

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

Equipe: fotos de pessoas em caixas iguais, sem cortar o rosto Ao vivo

<figure class="m-0">
  <div class="ar-4-3 r-m ov-hi">
    <img src="/carlos.jpg" alt="Carlos, gerente" class="w-fl h-fl blk of-cov obp-t">
  </div>
  <figcaption class="mt-2"><strong>Carlos</strong> <span class="t-mut t-p">Gerente</span></figcaption>
</figure>

Logos de clientes: todos inteiros, do mesmo tamanho Ao vivo

<div class="ar-3-2 bg-sur bd r-m p-m">
  <img src="/logo-cliente.png" alt="Nome do cliente" class="w-fl h-fl blk of-con">
</div>

<section class="rel ar-21-9 ov-hi">
  <video class="abs-fill w-fl h-fl of-cov" autoplay muted loop playsinline>
    <source src="/fundo.mp4" type="video/mp4">
  </video>
  <h1 class="rel">Sua chamada aqui</h1>
</section>

Precisa de quê

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

Cuidados — erros comuns

• Nada acontece? A imagem precisa ocupar a caixa toda (w-fl h-fl) e a caixa precisa ter altura (ex.: ar-sq). Só com of-cov e sem altura, a imagem continua do tamanho dela.
• of-* e obp-* vão na imagem, não na div em volta.
• obp-* só aparece quando sobra foto para escolher (com of-cov ou of-non). Com of-con a foto já aparece inteira.
• Evite of-fil: ele deforma (gente fica "gorda" ou "magra"). Quase sempre o certo é of-cov.
• Não use obp-* achando que é opacidade: opacidade é op-*; obp é a posição da foto.

O que ele não faz

• Só existem as 9 posições prontas (cantos, lados e centro). Para um ponto exato (ex.: 30% da esquerda), não há classe.
• Não funciona em imagem de fundo feita por CSS (background-image) — só em <img> e <video>.