`object-fit și object-position` în CSS

Modelul de cutie (Box Model) CSS3+

Stabilește cum se încadrează o imagine sau un video în cutia lui: decupat (cover), încadrat complet (contain) sau întins.

Sintaxă CSS

object-fit: cover;
object-fit: contain;
object-fit: fill;      /* implicit */
object-fit: none;
object-fit: scale-down;

object-position: center top;
object-position: 50% 20%;

Ce face `object-fit și object-position`

Când dai unui <img> sau <video> o lățime și o înălțime fixe care nu respectă proporțiile fișierului, browserul implicit întinde imaginea (fill) și o deformează. object-fit rezolvă asta.

cover umple toată cutia și decupează ce iese în afară (ideal pentru miniaturi și bannere). contain arată toată imaginea, cu spații goale pe laturi dacă e nevoie (ideal pentru logo-uri și poze de produs).

object-position alege ce parte a imaginii rămâne vizibilă la decupare. Implicit este 50% 50% (centrul); pentru portrete merge des center top, ca să nu tai capul persoanei.

Valori uzuale

Valoare	Descriere
`fill`	Implicit: imaginea se întinde exact pe cutie, chiar dacă se deformează.
`cover`	Umple cutia păstrând proporțiile; surplusul este decupat.
`contain`	Încape toată în cutie păstrând proporțiile; pot rămâne benzi goale.
`none`	Imaginea își păstrează mărimea originală; se vede doar porțiunea care încape.
`scale-down`	Alege varianta mai mică dintre none și contain.
`object-position`	Poziția imaginii în cutie (cuvinte cheie, procente sau lungimi).

Exemple

Exemplul 1: Miniaturi uniforme pentru o galerie de produse

Pozele încărcate de vânzători au proporții diferite, dar toate miniaturile ies pătrate și nedeformate.

.galerie img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
}

Efect vizual în browser

Toate miniaturile sunt pătrate de aceeași mărime. O poză lată a unei canapele este decupată pe laterale, una înaltă a unei lămpi este decupată sus și jos; nimic nu apare turtit.

Exemplul 2: Fotografii de profil decupate de sus

Pentru portrete, object-position: center top păstrează fața în cadru.

.echipa img {
  width: 160px;
  height: 200px;
  object-fit: cover;
  object-position: center top;
}