image-renderingVara määratleb, kuidas brauser peaks andma pildi, kui see on ülespoole või allapoole algsest mõõtmed. Vaikimisi üritab iga brauser moonutuste vältimiseks sellele skaalatud pildile varjunime rakendada, kuid see võib mõnikord olla probleem, kui tahame, et pilt säilitaks oma algse pikseldatud vormi.
img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )Nende kolme võimaliku väärtuse kohta:
auto: vaikeväärtus, mis kasutab brauseri standardset algoritmi pildi välimuse maksimeerimiseks.crisp-edges: pildi kontrastsus, värvid ja servad säilivad ühtlustamata ja hägustumata. Spetsifikatsiooni kohaselt oli see mõeldud spetsiaalselt pikslite jaoks. See väärtus kehtib piltide jaoks, mida on suurendatud või vähendatud.pixelated: kui pildi suurus muutub, säilitab brauser pikselstiili lähima naabri skaala abil. See väärtus kehtib ainult suurendatud piltide kohta.
Seda omadust saab rakendada nii taustkujutistele, canvaselementidele kui ka sisepiltidele. Oluline on siiski märkida, et nende väärtuste testimine on praegu eriti segane, kuna puudub järjepidev brauseritugi.
Näide
Siin on väga väike sisepilt, mis koosneb neljast värvilisest pikslist:
Kui muudame selle sisemise pildi laiuseks selliseks, et 300pxChrome (41), leiame, et brauser on püüdnud pilti optimeerida nii hästi kui võimalik:
Algse pikslise ilme säilitamiseks võime kasutada järgmist pixelatedväärtust, näiteks:
img ( image-rendering: pixelated; )Selle tulemusel valib brauser pildi töötlemiseks alternatiivse algoritmi. Selles näites eemaldab Chrome vaikimisi varjunime:
Kahjuks tundub pärast paljude testide tegemist, et brauserid tõlgendavad väärtusi crisp-edgesja pixelatedväärtusi praegu väga segastel viisidel, seega on oluline veel kord märkida, et see spetsifikatsioon on alles algusjärgus. Näiteks näib, et Chrome renderdab pixelatedpilte samamoodi nagu Firefox ja Safari renderdavad pilte crisp-edges.
QR-koodi näide
Teine selle atribuudi kasutamisjuhtum võib olla QR-koodide jaoks, kus soovite selle suurust suurendada, ilma et see moonutataks, kasutades tavalist aliasimist. Kontrollige kindlasti pilti täisekraanirežiimis, et näha pilti:
Vaadake CodePenil Robin Rendle (@robinrendle) pliiatsi kujutise renderdamise demot.
Lülita näide
Allpool olevas pliiatsis on võimalik nende väärtuste vahel vahetada ja vaadata brauserite vahelisi erinevusi:
Vaadake CodePenilt Robin Rendle (@robinrendle) pliiatsi renderdamise demot.
Brauseri tugi
crisp-edgesnõuab praegu -moz-crisp-edgesparima toe saamiseks hankija eesliiteid ( ).
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 41 | 3,6 * | 11 * | 79 | 10 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 * | 81 | 10,0-10,2 |
Selle värskenduse ajal toetab Firefox 61, crisp-edgeskuid mitte pixelatedja Chrome 68, pixelatedkuid mitte crisp-edges.