CSS image-rendering egenskab

Definition and Usage

image-rendering Egenskaben specificerer den algoritme, der bruges til billedskalering.

Bemærk:Denne egenskab har ingen effekt på ubeskåret billeder.

Eksempel

Viser de forskellige algoritmer, der kan bruges til billedskalering:

.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;
}

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi Beskrivelse
auto Lad browseren vælge skaleringsalgoritmen. Standardværdi.
smooth Brug en algoritme til at glatte farverne i billedet
high-quality Som smooth, men foretrækker høj kvalitetsskalering
crisp-edges Brug en algoritme til at bevare kontrasten og kanterne i billedet
pixelated

Hvis billedet forstørres, bruges næste-næringsalgoritmen, så billedet vil se ud til at bestå af store pixel.

Hvis billedet formindskes, er det ligesom auto.
initial Sæt denne egenskab til dens standardværdi. Se: initial.
inherit Arv denne egenskab fra sin forældrelement. Se: inherit.

Tekniske detaljer

Standardværdi: auto
Arv: ja
Animation producering: Ikke understøttet. Se:Animation-relaterede egenskaber.
Version: CSS3
JavaScript syntaks: object.style.imageRendering="pixelated"

Browserunderstøttelse

Tallene i tabellen viser den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge og Opera bruger -webkit-optimize-contrast som alias for crisp-edges værdien.