Potrivire obiect CSS. Proprietatea CSS object-fit. Asistență browser.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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;
}