Kuvien renderointi - CSS-temppuja

image-renderingOminaisuus määrittelee, miten selaimen pitäisi tehdä kuvan, jos se skaalataan ylöspäin tai alaspäin alkuperäisestä ulottuvuuksia. Oletuksena kukin selain yrittää soveltaa aliasta tähän skaalattuun kuvaan vääristymien estämiseksi, mutta tämä voi joskus olla ongelma, jos haluamme kuvan säilyttävän alkuperäisen pikselöidyn muodon.

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

Tietoja näistä kolmesta mahdollisesta arvosta:

auto: oletusarvo, joka käyttää selaimen vakioalgoritmia kuvan ulkonäön maksimoimiseksi.
crisp-edges: kuvan kontrasti, värit ja reunat säilyvät ilman tasoittamista tai epätarkkuutta. Spesifikaation mukaan tämä oli tarkoitettu erityisesti pikselitaiteelle. Tämä arvo koskee kuvia, jotka on skaalattu ylös tai alas.
pixelated: kuvan koon muuttuessa selain säilyttää pikselityylinsä käyttämällä lähimmän naapurin skaalausta. Tämä arvo koskee vain suurennettuja kuvia.

Tätä ominaisuutta voidaan soveltaa taustakuviin, canvaselementteihin ja sisäisiin kuviin. On kuitenkin tärkeää huomata, että näiden arvojen testaaminen tällä hetkellä on erityisen hämmentävää johdonmukaisen selaintuen puutteen vuoksi.

Esimerkki

Tässä on hyvin pieni sisäinen kuva, joka koostuu neljästä värillisestä pikselistä:

Jos muutamme tämän sisäisen kuvan leveyden 300pxChromeen (41), löydämme selaimen yrittäneen optimoida kuvan parhaalla mahdollisella tavalla:

Alkuperäisen pikselöidyn ilmeen säilyttämiseksi voimme käyttää seuraavaa pixelatedarvoa, kuten:

img ( image-rendering: pixelated; )

Tämän seurauksena selain valitsee vaihtoehtoisen algoritmin kuvan käsittelemiseksi. Tässä esimerkissä Chrome poistaa oletuksen aliaksen:

Valitettavasti paljon testien jälkeen näyttää siltä, että selaimet tulkitsevat crisp-edgesja pixelatedarvot tällä hetkellä hyvin hämmentävällä tavalla, joten on tärkeää jälleen kerran todeta, että tämä määrittely on alkuvaiheessa. Esimerkiksi Chrome näyttää renderöivän pixelatedkuvia samalla tavalla kuin Firefox ja Safari renderöivät kuvia crisp-edges.

Esimerkki QR-koodista

Toinen tämän ominaisuuden käyttötapa voi olla QR-koodeille, joissa haluat lisätä sen kokoa vääristämättä sitä käyttämällä tavallista liimausta. Varmista, että tarkistat tämän esimerkin koko näytön tilassa nähdäksesi kuvan venyvän:

Katso Robin Rendlen (@robinrendle) Pen Image-rendering -demo CodePenistä.

Vaihda esimerkki

Alla olevassa kynässä on mahdollista vaihtaa näiden arvojen välillä ja nähdä selainten väliset ristiriidat:

Katso Robin Rendlen (@robinrendle) Pen Image rendering -demo CodePenistä.

Selaimen tuki

crisp-edgesvaatii tällä hetkellä toimittajan etuliitteitä ( -moz-crisp-edges) saadakseen parhaan mahdollisen tuen.

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.