Prikaz slika - CSS-trikovi | CSS Almanah 2025

U image-renderingvlasništva definira kako se preglednik treba uzvratiti sliku ako je umanjena prema gore ili dolje od svojih originalnih dimenzija. Prema zadanim postavkama, svaki će preglednik pokušati primijeniti pseudonim na ovu umanjenu sliku kako bi spriječio iskrivljenje, ali to ponekad može predstavljati problem ako želimo da slika sačuva svoj izvorni pikselizirani oblik.

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

O te tri moguće vrijednosti:

auto: zadana vrijednost koja koristi standardni algoritam preglednika za maksimiziranje izgleda slike.
crisp-edges: kontrast, boje i rubovi slike sačuvat će se bez izravnavanja ili zamućenja. Prema specifikaciji ovo je bilo posebno namijenjeno pixel artu. Ova se vrijednost odnosi na slike uvećane ili smanjene.
pixelated: kako slika mijenja veličinu, preglednik će sačuvati svoj pikselizirani stil korištenjem skaliranja najbližeg susjeda. Ova se vrijednost odnosi samo na slike koje su povećane.

Ovo se svojstvo može primijeniti na pozadinske slike, canvaselemente kao i na umetnute slike. Važno je napomenuti da je trenutno testiranje ovih vrijednosti posebno zbunjujuće zbog nedostatka dosljedne podrške preglednika.

Primjer

Evo vrlo male umetnute slike koja se sastoji od četiri piksela u boji:

Ako promijenimo širinu ove umetnute slike na 300pxtada u Chromeu (41), naći ćemo da je preglednik pokušao optimizirati sliku najbolje što može:

Da bismo sačuvali svoj izvorni pikselizirani izgled, možemo koristiti sljedeću pixelatedvrijednost, poput ove:

img ( image-rendering: pixelated; )

To rezultira time da preglednik bira alternativni algoritam s kojim će obrađivati sliku. U ovom primjeru Chrome će ukloniti zadani alias:

Nažalost, nakon puno testiranja čini se da preglednici trenutno interpretiraju vrijednosti crisp-edgesi pixelatedvrijednosti na vrlo zbunjujuće načine pa je važno još jednom napomenuti da je ova specifikacija u vrlo ranim danima. Na primjer, čini se da Chrome prikazuje pixelatedslike na isti način na koji će ih prikazivati Firefox i Safari crisp-edges.

Primjer QR koda

Sljedeći slučaj upotrebe ovog svojstva mogao bi biti QR kodovi gdje želite povećati njegovu veličinu bez izobličenja korištenjem standardnog antialiasinga. Obavezno provjerite ovaj primjer u načinu cijelog zaslona da biste vidjeli rastezanje slike:

Pogledajte demonstracijski prikaz Pen Image-renderiranja Robina Rendlea (@robinrendle) na CodePenu.

Uključi / isključi primjer

U olovci ispod moguće je prebacivati se između ovih vrijednosti i vidjeti razlike između preglednika:

Pogledajte demonstracijski prikaz Pen Image renderiranja Robina Rendlea (@robinrendle) na CodePenu.

Podrška preglednika

crisp-edgestrenutno zahtijeva prefikse dobavljača ( -moz-crisp-edges) da bi dobio najbolju moguću podršku.

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.