Objekt-prikladan - CSS-trikovi

U object-fitvlasništva definira kako Element odgovara na visinu i širinu kutije sadržaja. Namijenjen je slikama, videozapisima i drugim medijima koji se mogu ugrađivati zajedno sa object-positionsvojstvom. Koristi se sam po sebi, object-fitomogućuje nam obrezivanje umetnute slike dajući nam preciznu kontrolu nad načinom na koji se mljacka i proteže unutar okvira.

object-fit može se postaviti s jednom od ovih pet vrijednosti:

fill: ovo je zadana vrijednost koja proteže sliku tako da stane u okvir sadržaja, bez obzira na omjer slike.
contain: povećava ili smanjuje veličinu slike kako bi se ispunio okvir uz očuvanje omjera.
cover: slika će ispuniti visinu i širinu okvira, ponovno zadržavajući omjer slike, ali često obrezujući sliku u procesu.
none: slika će zanemariti visinu i širinu roditelja i zadržati izvornu veličinu.
scale-down: slika će usporediti razliku između nonei containkako bi se pronašla najmanja veličina konkretnog objekta.

Evo kako bismo mogli postaviti to svojstvo:

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

Budući da druga slika ima omjer slike koji se razlikuje od izvorne slike na lijevoj strani, ona će se protezati izvan područja okvira sa svojim sadržajem, obrezujući gornji i donji dio slike.

Vrijedno je napomenuti da je slika prema zadanim postavkama centrirana unutar okvira sa sadržajem, ali to se može promijeniti sa object-positionsvojstvom.

Demo

Demonstracija u nastavku prikazuje pet primjera koji detaljno opisuju kako bismo možda željeli da se slika stisne u okvir sa sadržajem koji je ponekad manji ili veći od izvorne širine (promijenite veličinu preglednika za bolju ideju kako to može funkcionirati):

Pogledajte Pen-objekt koji je stavio Robin Rendle (@robinrendle) na CodePen-u.

Ako sadržaj slike iz bilo kojeg razloga ne ispuni okvir sadržaja, tada će nepopunjeni prostor prikazati pozadinu elementa, u ovom slučaju svijetlosivu pozadinu.

Podrška preglednika

Vrijedno je napomenuti da su iOS 8-9.3 i Safari 7-9.1 object-fitsvojstvo, ali ne object-position.

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.