CSS image-rendering eigenschap

Definitie en gebruik

image-rendering Deze eigenschap specificeert het type algoritme dat wordt gebruikt voor het zoomen van afbeeldingen.

Opmerking:Deze eigenschap heeft geen effect op niet-verkleinde afbeeldingen.

Voorbeeld

Toont de verschillende algoritmen die beschikbaar zijn voor het zoomen van afbeeldingen:

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

Probeer het zelf uit

CSS-syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
auto Laat de browser de zoomalgoritme kiezen. Standaardwaarde.
smooth Gebruik een algoritme om de kleuren in het beeld te gladstrekken
high-quality Hetzelfde als smooth, maar geeft de voorkeur aan hoge kwaliteit bij het zoomen
crisp-edges Gebruik een algoritme om de contrast en randen in het beeld te behouden
pixelated

Als het beeld wordt vergroot, wordt het recentste buren-algoritme gebruikt, waardoor het beeld eruitziet als samengesteld uit grote pixels.

Als het beeld wordt verkleind, is het hetzelfde als auto.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap overneemt van zijn ouder element. Raadpleeg inherit.

Technische details

Standaardwaarde: auto
Inheritantie: ja
Animatie maken: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript-syntaxis: object.style.imageRendering="pixelated"

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die deze eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge en Opera gebruiken -webkit-optimize-contrast als alias voor de waarde crisp-edges.