Hålla pixlad ut Bilder pixlad ut som De Skala

0
48

Detta är en liten påminnelse om att det är en CSS-egenskapen för att hjälpa styra vad som händer med bilder som de skala upp: bild-rendering.

Vi är ganska vana vid tanken att skalning en bild som är större än dess naturliga storlek (uppskalning) som orsakar det att vara suddig. Så hemskt som det är, det är webbläsaren som gör det bästa den kan för att algoritmiskt jämna ut en bild över fler pixlar än den har data. Men låt oss säga att du vill helst inte att det gör det. Säger bilden är redan pixel-y (pixel art), eller om du föredrar utseendet av en pixelated uppskalning.

Du kan göra det!

img {
bild-rendering: pixlad ut;
bild-rendering: -moz-skarpa kanter.
bild-rendering: skarpa kanter.
}

Det är lite obekväma i att spec erbjuder tre värden: auto, pixlad ut, och skarpa kanter. Både pixlad ut och skarpa kanter, för pixel konst, att verka göra samma sak för mig, även om spec talar om dem på ett något annorlunda sätt (pixelated rekommenderar den “närmaste granne” eller liknande algoritm samtidigt skarp-kanterna är inte så specifikt).

Lägga till tafatthet, Chrome stödjer endast pixlad ut och Firefox stöder endast skarpa kanter, och den djupaste webbläsare stöd, du måste prefix till -moz-skarpa kanter. Lyckligtvis kan du krossa dem alla tillsammans och det verkar bra.

Här är ett exempel med och utan, med en bild från James T. jag hittade på Tumblr:

Se Pennan pixlad ut bilder av Chris Coyier (@chriscoyier) på CodePen.