CSS image-rendering-Eigenschaft

定义和用法

image-rendering Das Attribut bestimmt den Algorithmustyp, der für die Bildvergrößerung verwendet wird.

Hinweis:Dieser Wert hat keine Wirkung auf nicht verkleinerte Bilder.

Beispiel

Zeigen Sie verschiedene Algorithmen für die Bildvergrößerung:

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

Probieren Sie es selbst aus

CSS-Syntax

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

Attributwert

Wert Beschreibung
auto Lassen Sie den Browser den Skalierungsalgorithmus auswählen. Standardwert.
smooth Verwenden Sie ein Algorithmus, um die Farben im Bild zu glätten
high-quality Gleich wie smooth, aber bevorzugt eine höhere Qualität bei der Vergrößerung
crisp-edges Verwenden Sie ein Algorithmus, um die Kontraste und Kanten im Bild zu behalten
pixelated

Wenn das Bild vergrößert wird, wird das kürzeste Nahebenverfahren verwendet, daher wird das Bild wie aus großen Pixeln bestehen aussehen.

Wenn das Bild verkleinert wird, ist es gleich auto.
initial Setzen Sie diesen Wert auf seinen Standardwert. Siehe initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: auto
Vererbbarkeit: ja
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.imageRendering="pixelated"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Eigenschaft vollständig unterstützen.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge und Opera verwenden -webkit-optimize-contrast als Alias für den Wert crisp-edges.