Objekt-primeren - CSS-triki | Almanah CSS 2025

Na object-fitlastnine določa, kako an odgovarja element v višino in širino svoje vsebine polja. Namenjen je slikam, videoposnetkom in drugim vdelanim predstavnostnim formatom v povezavi z object-positionlastnostjo. Če object-fitga uporabimo samostojno, lahko obrežemo vrstico, tako da dobimo natančen nadzor nad tem, kako meče in se razteza v svoji škatli.

object-fit lahko nastavite z eno od teh petih vrednosti:

fill: to je privzeta vrednost, ki sliko raztegne tako, da ustreza polju vsebine, ne glede na razmerje stranic.
contain: poveča ali zmanjša velikost slike, da zapolni polje, hkrati pa ohrani njeno razmerje stranic.
cover: slika bo zapolnila višino in širino polja, pri čemer bo znova ohranila razmerje stranic, vendar bo v postopku pogosto obrezala sliko.
none: slika bo prezrla višino in širino nadrejenega in ohranila prvotno velikost.
scale-down: slika bo primerjala razliko med nonein containza iskanje najmanjše velikosti konkretnega predmeta.

To lastnost lahko nastavimo tako:

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

Ker ima druga slika razmerje stranic, ki se razlikuje od prvotne slike na levi, se bo raztezala zunaj področja vsebine in obrezovala zgornji in spodnji del slike.

Omeniti velja, da je slika privzeto centrirana znotraj polja z vsebino, vendar je to mogoče spremeniti z object-positionlastnostjo.

Demo

Spodnja predstavitev prikazuje pet primerov, ki podrobno opisujejo, kako bi morda želeli, da se slika stisne v polje z vsebino, ki je včasih manjša ali večja od prvotne širine (spremenite velikost brskalnika, da boste bolje razumeli, kako to lahko deluje):

Oglejte si Pen-objekt, ki ga je pripravil Robin Rendle (@robinrendle) na CodePen.

Če vsebina slike iz katerega koli razloga ne zapolni polja z vsebino, bo neizpolnjen prostor prikazal ozadje elementa, v tem primeru svetlo sivo ozadje.

Podpora brskalnika

Omeniti velja, da sta iOS 8-9.3 in Safari 7-9.1 object-fitlastnina, vendar ne object-position.

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.