De image-renderingeiendoms definerer hvordan nettleseren skal gjengi et bilde hvis det er skalert opp eller ned fra sine opprinnelige dimensjoner. Som standard vil hver nettleser prøve å bruke aliasing på dette skalerte bildet for å forhindre forvrengning, men dette kan noen ganger være et problem hvis vi vil at bildet skal bevare sin opprinnelige pikselform.
img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )Om de tre mulige verdiene:
auto: standardverdi som bruker nettleserens standardalgoritme for å maksimere utseendet til et bilde.crisp-edges: kontrasten, fargene og kantene på bildet bevares uten glatting eller uskarphet. I følge spesifikasjonen var dette spesielt ment for pikselkunst. Denne verdien gjelder bilder som er skalert opp eller ned.pixelated: når bildet endrer størrelse, vil nettleseren bevare den pikseliserte stilen ved å bruke skalering av nærmeste nabo. Denne verdien gjelder bare for bilder som er skalert opp.
Denne egenskapen kan brukes på bakgrunnsbilder, canvaselementer samt innebygde bilder. Det er imidlertid viktig å merke seg at å teste disse verdiene på dette tidspunktet er spesielt forvirrende på grunn av mangel på konsistent nettleserstøtte.
Eksempel
Her er et veldig lite innebygd bilde som består av fire fargede piksler:
Hvis vi endrer bredden på dette innebygde bildet til 300pxderetter i Chrome (41), vil vi finne at nettleseren har forsøkt å optimalisere bildet så godt det kan:
For å bevare sitt opprinnelige pikselerte utseende kan vi bruke følgende pixelatedverdi, slik:
img ( image-rendering: pixelated; )Dette resulterer i at nettleseren velger en alternativ algoritme som bildet skal behandles med. I dette eksemplet fjerner Chrome standardaliaseringen:
Dessverre, etter mange tester, ser det ut til at nettlesere tolker crisp-edgesog pixelatedverdiene på svært forvirrende måter for øyeblikket, så det er viktig å merke seg at denne spesifikasjonen er i sine aller første dager. For eksempel ser det ut til at Chrome gjengir pixelatedbilder på samme måte som Firefox og Safari gjengir bilder med crisp-edges.
QR-kodeeksempel
Et annet brukstilfelle for denne egenskapen kan være for QR-koder der du vil øke størrelsen uten å forvride den ved å bruke standard anti-aliasing. Sørg for å sjekke dette eksemplet i fullskjermmodus for å se bildets strekk:
Se Pen Image-rendering demo av Robin Rendle (@robinrendle) på CodePen.
Bytt eksempel
I pennen nedenfor er det mulig å veksle mellom disse verdiene og se avvikene mellom nettlesere:
Se Pen Image rendering demo av Robin Rendle (@robinrendle) på CodePen.
Nettleserstøtte
crisp-edgeskrever for øyeblikket leverandørprefikser ( -moz-crisp-edges) for å få best mulig støtte.
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 41 | 3,6 * | 11 * | 79 | 10 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 | 10.0-10.2 |
På tidspunktet for denne oppdateringen støtter Firefox 61, crisp-edgesmen ikke, pixelatedog Chrome 68 støtter, pixelatedmen ikke crisp-edges.