Upodabljanje slik - CSS-triki

Na image-renderinglastnine opredeljuje, kako naj brskalnik napravijo sliko, če je pomanjšana navzgor ali navzdol od prvotnih dimenzij. Privzeto bo vsak brskalnik poskušal uporabiti vzdevek na tej pomanjšani sliki, da bi preprečil popačenje, vendar je to včasih lahko težava, če želimo, da slika ohrani svojo prvotno pikselizirano obliko.

img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )

O teh treh možnih vrednostih:

auto: privzeta vrednost, ki uporablja standardni algoritem brskalnika za povečanje videza slike.
crisp-edges: kontrast, barve in robovi slike bodo ohranjeni brez glajenja ali zameglitve. V skladu s specifikacijami je bilo to posebej namenjeno slikovnim slikam. Ta vrednost velja za slike, pomanjšane navzgor ali navzdol.
pixelated: ko se slika spremeni v velikosti, bo brskalnik ohranil svoj pikseliran slog z uporabo merjenja najbližjega soseda. Ta vrednost velja samo za slike, ki so povečane.

To lastnost je mogoče uporabiti za slike v ozadju, canvaselemente in slike v vrstici. Pomembno pa je omeniti, da je testiranje teh vrednosti trenutno še posebej zmedeno zaradi pomanjkanja stalne podpore brskalnika.

Primer

Tu je zelo majhna slika v vrstici, sestavljena iz štirih barvnih slikovnih pik:

Če spremenimo širino te vrstice v sliko 300pxv Chromu (41), bomo ugotovili, da je brskalnik poskušal sliko optimizirati, kolikor je le mogoče:

Za ohranitev prvotnega pikseliranega videza lahko uporabimo naslednjo pixelatedvrednost:

img ( image-rendering: pixelated; )

Rezultat tega je, da brskalnik izbere alternativni algoritem za obdelavo slike. V tem primeru bo Chrome odstranil privzeto vzdevek:

Na žalost se po številnih testiranjih zdi, da brskalniki trenutno crisp-edgesin pixelatedvrednosti interpretirajo na zelo zmeden način, zato je treba še enkrat opozoriti, da je ta specifikacija v zelo zgodnjih dneh. Chrome na primer prikazuje pixelatedslike na enak način, kot jih Firefox in Safari upodabljata crisp-edges.

Primer kode QR

Drug primer uporabe te lastnosti je lahko za kode QR, kjer želite povečati njeno velikost, ne da bi jo popačili s standardnim izravnavanjem. Preverite ta primer v celozaslonskem načinu in si oglejte raztezanje slike:

Oglejte si predstavitev Pen-upodabljanja slik Robina Rendleja (@robinrendle) na CodePen.

Preklopi primer

V spodnjem pisalu lahko preklapljate med temi vrednostmi in vidite razlike med brskalniki:

Oglejte si predstavitev Pen Image upodabljanja Robina Rendleja (@robinrendle) na CodePen.

Podpora brskalnika

crisp-edgestrenutno potrebuje predpone ponudnikov ( -moz-crisp-edges), da dobite najboljšo možno podporo.

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.