SWCore / CSS / Object-fit

Object-fit CSS

Como a imagem preenche a caixa (cover/contain) e qual parte fica visível — 9 posições.

O que é

Controle de encaixe e posição de imagem/vídeo dentro de um contêiner de tamanho fixo, sem distorcer.

Como funciona

Aplica object-fit (o modo de encaixe) e object-position (qual parte fica visível) direto na tag <img> ou <video> — o contêiner ao redor precisa ter altura definida (fixa, aspect-ratio ou %) pra o encaixe fazer sentido; sem isso a mídia some ou fica esticada.

Exemplos

Os 5 modos de encaixe Ao vivo

of-cov

of-con

of-fil

of-non

of-scd

A mesma foto 16:9 dentro de uma caixa quadrada. Repare: of-cov corta, of-con deixa faixa vazia, of-fil distorce.

<div class="ar-sq">
  <img src="/foto.jpg" class="of-cov" alt="">
</div>

<!-- cov = corta pra preencher (quase sempre o que você quer)
     con = cabe inteira, sobra espaço
     fil = estica (distorce — evite)
     non = tamanho original
     scd = o menor entre none e contain -->

As 9 posições do corte Ao vivo

obp-tl

obp-t

obp-tr

obp-l

obp-c (padrão)

obp-r

obp-bl

obp-b

obp-br

<img src="/foto.jpg" class="of-cov obp-t" alt="">

<!-- a sigla é posição vertical + horizontal:
     t=topo  b=base  l=esquerda  r=direita  c=centro
     palavra sozinha = "centro daquele lado" → obp-t = center top -->

Foto de pessoa — mantendo o rosto no quadro Ao vivo

obp-c — corta a cabeça

obp-t — mantém o rosto

<!-- retrato dentro de caixa quadrada: ancore no topo -->
<div class="ar-sq">
  <img src="/pessoa.jpg" class="of-cov obp-t" alt="">
</div>

<!-- é o ajuste que mais resolve em foto de equipe e avatar -->

Também vale para vídeo Ao vivo

As mesmas classes funcionam em <video>: é a forma de encaixar um vídeo de fundo numa seção sem distorcer nem deixar tarja preta.

<div class="ar-16-9">
  <video class="of-cov" autoplay muted loop playsinline>
    <source src="/fundo.mp4" type="video/mp4">
  </video>
</div>

Atributos

Nenhum.

Variantes

of-cov

cover — preenche a caixa e corta o que sobra (o mais usado)

of-con

contain — cabe inteira, sobrando espaço nas bordas

of-fil

fill — estica pra preencher, distorcendo

of-non

none — tamanho original, sem ajuste

of-scd

scale-down — o menor entre none e contain

obp-tl · obp-t · obp-tr

qual parte fica visível: canto superior esquerdo, topo, superior direito

obp-l · obp-c · obp-r

esquerda, centro (padrão), direita

obp-bl · obp-b · obp-br

inferior esquerdo, base, inferior direito

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

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

O contêiner precisa ter altura definida (fixa, aspect-ratio ou %). Sem isso não existe "caixa" pra encaixar, e a imagem volta a se comportar como imagem normal.
of-fil distorce de propósito — só use quando a deformação for intencional.

← AnteriorZoom Próximo →Proporção