Objektile sobiv - CSS-trikid | CSS-i almanahh 2025

object-fitVara määratleb, kuidas element reageerib kõrgus ja laius selle sisu kasti. See on mõeldud koos object-positionatribuudiga piltide, videote ja muude manustatavate meediumivormingute jaoks . Ise kasutatuna object-fitvõimaldab meil kärpida sisemist pilti, andes meile täpse kontrolli selle üle, kuidas see oma kasti sees sirutab ja venib.

object-fit saab määrata ühe neist viiest väärtusest:

fill: see on vaikeväärtus, mis venitab pildi sisukasti sobivaks, olenemata selle kuvasuhtest.
contain: suurendab või vähendab pildi suurust kasti täitmiseks, säilitades samal ajal selle kuvasuhte.
cover: pilt täidab selle kasti kõrguse ja laiuse, säilitades veel kord kuvasuhte, kuid kärpides selle käigus pilti sageli.
none: pilt ignoreerib vanema kõrgust ja laiust ning säilitab selle algse suuruse.
scale-down: pilt võrdleb erinevust noneja containleidmaks väikseimat konkreetse objekti suurust.

Nii võime selle atribuudi määrata:

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

Kuna teisel pildil on kuvasuhe, mis erineb vasakpoolsest originaalpildist, venib see väljaspool sisukasti, kärpides pildi ülemist ja alumist osa.

Väärib märkimist, et vaikimisi on pilt keskendatud selle sisukasti, kuid seda saab object-positionatribuudiga muuta .

Demo

Allpool toodud demo näitab viit näidet, milles kirjeldatakse üksikasjalikult, kuidas võiksime pilti sisukasti sirvida, mis on mõnikord väiksem või suurem kui algne laius (muutke brauseri suurust, et paremini mõista, kuidas see võiks toimida):

Vaadake CodePenilt Robin Rendle'i (@robinrendle) pliiatsiobjekti.

Kui pildi sisu ei täida mingil põhjusel sisukasti, näitab täitmata ruum elemendi tausta, antud juhul helehalli tausta.

Brauseri tugi

Väärib märkimist, et iOS 8-9.3 ja Safari 7-9.1 object-fitvara, kuid mitte object-position.

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.