Par image-renderingīpašuma definēts, kā pārlūkprogramma būtu jāpadara attēlu, ja tas ir samazināts uz augšu vai uz leju no tā sākotnējiem izmēriem. Pēc noklusējuma katrs pārlūks šim mērogotajam attēlam mēģinās piemērot pseidonīmu, lai novērstu traucējumus, taču dažreiz tas var būt problēma, ja mēs vēlamies, lai attēls saglabātu sākotnējo pikseļu formu.
img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )Par šīm trim iespējamām vērtībām:
auto: noklusējuma vērtība, kas izmanto pārlūka standarta algoritmu, lai maksimizētu attēla izskatu.crisp-edges: attēla kontrasts, krāsas un malas tiks saglabātas bez izlīdzināšanas vai izplūduma. Saskaņā ar spec, tas bija īpaši paredzēts pikseļu mākslai. Šī vērtība attiecas uz attēliem, kas mērogoti uz augšu vai uz leju.pixelated: mainoties attēla izmēram, pārlūkprogramma saglabās savu pikseļu stilu, izmantojot tuvākā kaimiņa mērogošanu. Šī vērtība attiecas tikai uz palielinātajiem attēliem.
Šo īpašību var izmantot fona attēliem, canvaselementiem, kā arī iekļautiem attēliem. Tomēr ir svarīgi atzīmēt, ka šo vērtību pārbaude šobrīd ir īpaši mulsinoša, jo trūkst konsekventa pārlūka atbalsta.
Piemērs
Šeit ir ļoti mazs iekšējais attēls, kas sastāv no četriem krāsainiem pikseļiem:
Ja mainīsim šī iekšējā attēla platumu uz 300pxpārlūku Chrome (41), mēs atradīsim, ka pārlūks ir mēģinājis optimizēt attēlu pēc iespējas labāk:
Lai saglabātu sākotnējo pikseļu izskatu, mēs varam izmantot šādu pixelatedvērtību, piemēram:
img ( image-rendering: pixelated; )Tā rezultātā pārlūkprogramma izvēlas alternatīvu algoritmu, ar kuru apstrādāt attēlu. Šajā piemērā Chrome noņem noklusējuma aizstājvārdu:
Diemžēl pēc daudzām pārbaudēm šķiet, ka pārlūkprogrammas crisp-edgesun pixelatedvērtības šobrīd ļoti mulsinoši interpretē, tāpēc ir svarīgi vēlreiz atzīmēt, ka šī specifikācija ir agrīnā sākumā. Piemēram, šķiet, ka pārlūks Chrome atveido pixelatedattēlus tāpat kā ar Firefox un Safari attēlus crisp-edges.
QR koda piemērs
Vēl viens šī rekvizīta izmantošanas gadījums varētu būt QR kodi, kur vēlaties palielināt tā izmērus, to neizkropļojot, izmantojot standarta pretaizspiešanu. Pārbaudiet šo piemēru pilnekrāna režīmā, lai redzētu attēla izstiepšanos:
Skatiet Robina Rendles (@robinrendle) Pen Image renderēšanas demonstrāciju vietnē CodePen.
Pārslēgšanas piemērs
Zemāk esošajā pildspalvā ir iespējams pārslēgties starp šīm vērtībām un redzēt neatbilstības starp pārlūkprogrammām:
Skatiet Robina Rendles (@robinrendle) Pen Image renderēšanas demonstrāciju vietnē CodePen.
Pārlūkprogrammas atbalsts
crisp-edgesPašlaik ir nepieciešami pārdevēja prefiksi ( -moz-crisp-edges), lai iegūtu vislabāko iespējamo atbalstu.
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 41 | 3,6 * | 11 * | 79 | 10 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81. | 10.0-10.2 |
Šī atjauninājuma laikā Firefox 61 atbalsta, crisp-edgesbet neatbalsta, pixelatedun Chrome 68 atbalsta, pixelatedbet neatbalsta crisp-edges.