CSS image-rendering ominaisuus

Määrittely ja käyttö

image-rendering Ominaisuus määrittää kuvien skaalaamiseen käytettävän algoritmin tyyppin.

Huomioitavaa:Tämä ominaisuus ei vaikuta alkuperäisiin kuviin.

Esimerkki

Näytetään eri algoritmit, jotka voidaan käyttää kuvien skaalaamiseen:

.image {
  height: 100px;
  width: 100px;
  image-rendering: auto;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.pixelated {
  image-rendering: pixelated;
}
.smooth {
  image-rendering: smooth;
}
.high-quality {
  image-rendering: high-quality;
}

Kokeile itse

CSS-kieli

image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;

Ominaisuusarvo

Arvo Kuvaus
auto Anna selaimen valita skaalausalgoritmi. Oletusarvo.
smooth Käytä algoritmia pehmennettääksesi kuvan värit
high-quality Sama kuin smooth, mutta enemmän laadukkaasti skaalautuvaa
crisp-edges Käytä algoritmia säilyttääksesi kuvan kontrastin ja reunat
pixelated

Jos kuva suurennetaan, käytetään lähimmän naapurin algoritmia, joten kuva näyttää koostuvan suurista kuvapikseleistä.

Jos kuva pienennetään, se on sama kuin auto.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Perii tämän ominaisuuden vanhemmalta elementiltään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: auto
Perinnäisyys: kyllä
Animaatioiden luominen: Ei tuettu. Katso:Animaatiot.
Versio: CSS3
JavaScript-kieli: object.style.imageRendering="pixelated"

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge ja Opera käyttävät -webkit-optimize-contrast-nimettä crisp-edges-arvon aliasina.