Holde Kornete Bilder Pixelated som De Skalaen

0
18

Dette er en liten påminnelse om at det er en CSS-egenskapen for å bidra til å kontrollere hva som skjer på bilder som de kan skaleres opp: bilde-gjengivelse.

Vi er ganske vant til ideen om at skalere et bilde som er større enn sin naturlige størrelse (oppskalering) fører det til å bli uskarpe. Så forferdelig som det er, det er leseren å gjøre det beste det kan algoritmer for å jevne ut et bilde over flere piksler enn det har data for. Men la oss si at du vil egentlig heller ikke det gjør det. Si bildet er allerede pixel-y (pixel kunst), eller du foretrekker utseendet av en kornete oppskalering.

Du kan gjøre det!

img {
bilde-gjengivelse: pixelated;
bilde-gjengivelse: -moz-skarp-kanter;
bilde-gjengivelse: skarp-kanter;
}

Det er litt vanskelig i og med at den spec tilbyr tre verdier: auto, pixelated, og skarp-kanter. Både kornete og skarp-kanter, for pixel kunst, ser ut til å gjøre det samme til meg, selv om spec snakker om dem på en litt annen måte (pixelated anbefaler den “nærmeste nabo” eller lignende algoritme mens skarp-kanter er ikke så spesifikk).

Å legge til forlegenhet, Chrome støtter bare kornete og Firefox støtter bare skarp-kanter, og for den dypeste nettleserstøtte, du må prefiks det til-moz-skarp-kanter. Heldigvis, kan du knuse dem alle sammen, og det virker fint.

Her er et eksempel med og uten, ved hjelp av et bilde fra James T. jeg funnet på Tumblr:

Se Penn kornete bilder av Chris Coyier (@chriscoyier) på CodePen.