Obiect-fit - CSS-Tricks | Almanah CSS 2025

De object-fitdefinește proprietatea modul în care un element răspunde la înălțimea și lățimea casetei conținut. Este destinat imaginilor, videoclipurilor și altor formate media încorporabile împreună cu object-positionproprietatea. Folosit de la sine, object-fitne permite să decupăm o imagine în linie, oferindu-ne un control fin asupra modului în care se strânge și se întinde în cutia sa.

object-fit poate fi setat cu una dintre aceste cinci valori:

fill: aceasta este valoarea implicită care întinde imaginea pentru a se potrivi cu caseta de conținut, indiferent de raportul de aspect.
contain: mărește sau scade dimensiunea imaginii pentru a umple caseta păstrând în același timp raportul de aspect.
cover: imaginea va umple înălțimea și lățimea casetei sale, menținându-și încă o dată raportul de aspect, dar de multe ori decupând imaginea în proces.
none: imaginea va ignora înălțimea și lățimea părintelui și își va păstra dimensiunea originală.
scale-down: imaginea va compara diferența dintre noneși containpentru a găsi cea mai mică dimensiune a obiectului concret.

Acesta este modul în care am putea seta această proprietate:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Deoarece a doua imagine are un raport de aspect diferit de imaginea originală din stânga, se va întinde în afara tărâmului casetei sale de conținut, decupând părțile superioare și inferioare ale imaginii.

Este demn de remarcat faptul că în mod implicit imaginea este centrată în caseta de conținut, dar aceasta poate fi modificată odată cu object-positionproprietatea.

Demo

Demo-ul de mai jos prezintă cinci exemple care detaliază modul în care am putea dori ca o imagine să se strângă într-o casetă de conținut care este uneori mai mică sau mai mare decât lățimea inițială (redimensionați browserul pentru o idee mai bună despre cum ar putea funcționa acest lucru):

Vedeți potrivirea obiectului Pen de Robin Rendle (@robinrendle) pe CodePen.

Dacă conținutul imaginii nu umple caseta de conținut din orice motiv, spațiul neumplut va afișa fundalul elementului, în acest caz un fundal gri deschis.

Suport pentru browser

Este demn de remarcat faptul că iOS 8-9.3 și Safari 7-9.1 sunt object-fitproprietatea, dar nu object-position.

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.