Приказивање слика - ЦСС-трикови

У image-renderingособина дефинише како бровсер треба рендер слику ако је умањена горе или доле од своје оригиналне димензије. Подразумевано ће сваки прегледач покушати да примени псеудоним на ову умањену слику како би спречио изобличење, али то понекад може представљати проблем ако желимо да слика сачува свој изворни пикселирани облик.

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

О те три могуће вредности:

auto: подразумевана вредност која користи стандардни алгоритам прегледача да би максимизирала изглед слике.
crisp-edges: контраст, боје и ивице слике ће се сачувати без изравнавања или замућења. Према спецификацији, ово је било посебно намењено за пикел арт. Ова вредност се односи на слике увећане или смањене.
pixelated: како слика мења величину, прегледач ће сачувати свој пикселирани стил коришћењем скалирања најближег суседа. Ова вредност се односи само на слике које су увећане.

Ово својство се може применити на позадинске слике, canvasелементе као и на уметнуте слике. Важно је напоменути да је тренутно тестирање ових вредности посебно збуњујуће због недостатка сталне подршке прегледача.

Пример

Ево врло мале уметнуте слике која се састоји од четири обојена пиксела:

Ако променимо ширину ове уметнуте слике на 300pxтада у Цхроме-у (41), открићемо да је прегледач покушао да оптимизира слику најбоље што може:

Да бисмо сачували свој изворни пикселирани изглед, можемо користити следећу pixelatedвредност, отприлике овако:

img ( image-rendering: pixelated; )

То резултира тиме да прегледач бира алтернативни алгоритам помоћу којег обрађује слику. У овом примеру Цхроме ће уклонити подразумевани алиас:

Нажалост, након пуно тестирања, чини се да прегледачи тренутно интерпретирају вредности crisp-edgesи pixelatedвредности на врло збуњујуће начине, па је важно још једном напоменути да је ова спецификација у врло раним данима. На пример, чини се да Цхроме приказује pixelatedслике на исти начин на који ће Фирефок и Сафари приказивати слике са њима crisp-edges.

Пример КР кода

Још један случај употребе овог својства може бити за КР кодове где желите да повећате његову величину без изобличења помоћу стандардног антиалиасинга. Обавезно погледајте овај пример у режиму целог екрана да бисте видели како се слика протеже:

Погледајте демонстрацију Пен-Имаге-рендерирања Робина Рендле-а (@робинрендле) на ЦодеПен-у.

Пребаци пример

У оловци испод могуће је пребацивати се између ових вредности и видети неслагања између прегледача:

Погледајте демонстрацију приказа Пен Имаге слике Робина Рендлеа (@робинрендле) на ЦодеПен-у.

Подршка прегледача

crisp-edgesтренутно захтева префиксе добављача ( -moz-crisp-edges) да би добили најбољу могућу подршку.

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.