Изобразяване на изображения - CSS-трикове

На image-renderingдефинира собственост как браузърът трябва да правят един образ, ако тя се увеличава нагоре или надолу от оригиналните си размери. По подразбиране всеки браузър ще се опита да приложи псевдоним към това мащабирано изображение, за да предотврати изкривяването, но това понякога може да е проблем, ако искаме изображението да запази оригиналната си пикселизирана форма.

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

Относно тези три възможни стойности:

auto: стойност по подразбиране, която използва стандартния алгоритъм на браузъра, за да максимизира появата на изображение.
crisp-edges: контрастът, цветовете и ръбовете на изображението ще се запазят без изглаждане или размазване. Според спецификацията това е специално предназначено за пикселно изкуство. Тази стойност се отнася за изображения, увеличени или намалени.
pixelated: тъй като изображението променя размера си, браузърът ще запази своя пикселизиран стил, като използва мащабиране на най-близкия съсед. Тази стойност се отнася само за изображения, които са увеличени.

Това свойство може да се приложи към фонови изображения, canvasелементи, както и вградени изображения. Важно е да се отбележи обаче, че тестването на тези стойности в момента е особено объркващо поради липсата на постоянна поддръжка на браузъра.

Пример

Ето едно много малко вградено изображение, което се състои от четири цветни пиксела:

Ако променим ширината на това вградено изображение на 300pxтогава в Chrome (41), ще открием, че браузърът се е опитал да оптимизира изображението възможно най-добре:

За да запазим първоначалния си пикселизиран вид, можем да използваме следната pixelatedстойност, по следния начин:

img ( image-rendering: pixelated; )

Това води до това, че браузърът избира алтернативен алгоритъм, с който да обработи изображението. В този пример Chrome ще премахне псевдонима по подразбиране:

За съжаление след много тестове изглежда, че браузърите интерпретират crisp-edgesи pixelatedстойностите по много объркващи начини в момента, така че е важно още веднъж да отбележим, че тази спецификация е в много ранните си дни. Например Chrome изглежда изобразява pixelatedизображения по същия начин, по който Firefox и Safari ще изобразяват изображения crisp-edges.

Пример за QR код

Друг случай на използване на това свойство може да е за QR кодове, където искате да увеличите размера му, без да го изкривявате, като използвате стандартното сглаждане. Не забравяйте да проверите този пример в режим на цял екран, за да видите разтягането на изображението:

Вижте демонстрацията за изобразяване на изображения на Pen от Робин Рендъл (@robinrendle) на CodePen.

Превключване на пример

В писалката по-долу е възможно да превключвате между тези стойности и да видите несъответствията между браузърите:

Вижте демонстрацията за изобразяване на Pen Image от Робин Рендъл (@robinrendle) на CodePen.

Поддръжка на браузър

crisp-edgesпонастоящем се изискват доставчикови префикси ( -moz-crisp-edges), за да получите възможно най-добрата поддръжка.

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.