Billedgengivelse - CSS-tricks

De image-renderingejendom definerer, hvordan browseren skal gør et billede, hvis det skaleres op eller ned fra dets oprindelige dimensioner. Som standard vil hver browser forsøge at anvende aliasing på dette skalerede billede for at forhindre forvrængning, men dette kan undertiden være et problem, hvis vi ønsker, at billedet bevarer sin oprindelige pixelformede form.

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

Om disse tre mulige værdier:

• auto: standardværdi, der bruger browserens standardalgoritme til at maksimere udseendet af et billede.
• crisp-edges: kontrast, farver og kanter på billedet bevares uden udjævning eller sløring. Ifølge specifikationen var dette specifikt beregnet til pixelkunst. Denne værdi gælder for billeder, der skaleres op eller ned.
• pixelated: når billedet ændrer størrelse, bevarer browseren sin pixelformede stil ved hjælp af skalering til nærmeste nabo. Denne værdi gælder kun for billeder, der skaleres op.

Denne egenskab kan anvendes på baggrundsbilleder, canvaselementer såvel som integrerede billeder. Det er dog vigtigt at bemærke, at test af disse værdier på dette tidspunkt er særlig forvirrende på grund af manglen på ensartet browsersupport.

Eksempel

Her er et meget lille indbygget billede, der består af fire farvede pixels:

Hvis vi ændrer bredden på dette integrerede billede til 300pxderefter i Chrome (41), finder vi browseren har forsøgt at optimere billedet så godt det kan:

For at bevare sit oprindelige pixeludseende kan vi bruge følgende pixelatedværdi som sådan:

img ( image-rendering: pixelated; )

Dette resulterer i, at browseren vælger en alternativ algoritme, som billedet skal behandles med. I dette eksempel fjerner Chrome standardaliasingen:

Desværre efter en masse teste det lader til at browsere fortolke crisp-edgesog pixelatedværdier i meget forvirrende måder i øjeblikket, så det er vigtigt at bemærke, endnu en gang, at denne specifikation er i sin meget tidlige dage. For eksempel ser Chrome ud til at gengive pixelatedbilleder på samme måde som Firefox og Safari gengiver billeder med crisp-edges.

QR-kodeeksempel

Et andet brugstilfælde for denne egenskab kan være for QR-koder, hvor du vil øge størrelsen uden at forvride den ved hjælp af standard anti-aliasing. Sørg for at kontrollere dette eksempel i fuldskærmstilstand for at se billedets strækning:

Se Pen-billedgengivelsesdemo af Robin Rendle (@robinrendle) på CodePen.

Skift eksempel

I pennen nedenfor er det muligt at skifte mellem disse værdier og se uoverensstemmelser mellem browsere:

Se Pen Image-gengivelsesdemo af Robin Rendle (@robinrendle) på CodePen.

Browsersupport

crisp-edgeskræver i øjeblikket leverandørpræfikser ( -moz-crisp-edges) for at få den bedst mulige support.

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome	Firefox	IE	Edge	Safari
41	3,6 *	11 *	79	10

Mobil / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85 *	81	10.0-10.2

På tidspunktet for denne opdatering understøtter Firefox 61 crisp-edgesmen ikke pixelatedog Chrome 68 understøtter, pixelatedmen ikke crisp-edges.