Potrivire obiect CSS. Proprietatea CSS object-fit. Asistență browser.

Proprietatea CSS object-fit

Proprietatea CSS object-fit este utilizată pentru a specifica modul în care un <img> sau <video> trebuie redimensionat pentru a se potrivi cu containerul său.

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune a browserului care acceptă integral proprietatea.



Proprietatea CSS object-fit

Proprietatea CSS object-fit este utilizată pentru a specifica modul în care un <img> sau <video> trebuie redimensionat pentru a se potrivi cu containerul său.
Această proprietate spune conținutului să umple containerul într-o varietate de moduri; cum ar fi „păstrați acel raport de aspect” sau „întindeți-vă și ocupați cât mai mult spațiu”.

Uită-te la următoarea imagine din Paris, care este de 400x300 pixeli:



Cu toate acestea, dacă stilul imaginii de mai sus este de 200x400 pixeli, va arăta astfel:



Exemplu:

img {
  width: 200px;
  height: 400px;
}

Vedem că imaginea este squeezed pentru a se potrivi cu containerul de 200x400 pixeli, iar aspectul său original este distrus.
Dacă folosim object-fit: cover; va tăia părțile laterale ale imaginii, păstrând aspect ratio și completând și spațiul, astfel:



Exemplu:

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}