24.2. fejezet: CSS alapismeretek - Elemek kitöltése

A CSS object-fit tulajdonságát akkor kell használni, ha nem a megszokott méretű tartalmazó dobozt (konténert) akarunk kitölteni képpel vagy videóval. Nézzük például az előző fejezetben szereplő képet – ezúttal 156x104-es méretben:

Ha most ettől eltérő arányúakat szeretnénk kihozni, akkor a következő kódrészletre lesz szükségünk:

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

Viszont ha használjuk az „object-fit: cover;” tulajdonságot, akkor a képünkből csak egy megfelelő részlet jelenik meg torzítás nélkül.

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

Az object-fit lehetséges paraméterei:
.fill: Ez az alapértelmezett.
.contain: A behelyettesített tartalom úgy lesz átméretezve, hogy megtartsa az arányát az elem tartalmi mezőjén belül.
.cover: Az előzőhöz hasonló, de az objektum szélei le vannak vágva a helyes méretezésért.
.none: A tartalom nincs átméretezve.
.scale-down: Kisebb méretű kép létrehozása, ha ez szükséges.

A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css3_object-fit.asp