image-rendering

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Januar 2020⁩.

* Some parts of this feature may have varying levels of support.

Die image-rendering CSS Eigenschaft legt einen Bildskalierungsalgorithmus fest. Die Eigenschaft gilt für das Element selbst, für alle in dessen anderen Eigenschaften festgelegten Bilder und für dessen Nachkommen.

Probieren Sie es aus

image-rendering: auto;

image-rendering: smooth;

image-rendering: crisp-edges;

image-rendering: pixelated;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/lizard.png" />
</section>

#example-element {
  height: 480px;
  object-fit: cover;
}

Der User Agent skaliert ein Bild, wenn der Seitenautor andere Abmessungen als die natürliche Größe festlegt. Eine Skalierung kann auch aufgrund von Benutzerinteraktionen (Zoom) auftreten. Beispielsweise, wenn die natürliche Größe eines Bildes 100×100px ist, aber die tatsächlichen Abmessungen 200×200px (oder 50×50px) betragen, wird das Bild mit dem durch image-rendering angegebenen Algorithmus hoch- oder herunterskaliert. Diese Eigenschaft hat keinen Effekt auf nicht skalierte Bilder.

Syntax

css

/* Keyword values */
image-rendering: auto;
image-rendering: smooth;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: revert-layer;
image-rendering: unset;

Werte

auto: Der Skalierungsalgorithmus ist UA-abhängig. Seit Version 1.9 (Firefox 3.0) verwendet Gecko bilineares Resampling (hohe Qualität).
smooth: Das Bild sollte mit einem Algorithmus skaliert werden, der das Erscheinungsbild des Bildes maximiert. Insbesondere sind Skalierungsalgorithmen, die Farben "glätten", akzeptabel, wie z. B. bilineare Interpolation. Dies ist für Bilder wie Fotos gedacht.
crisp-edges: Das Bild wird mit einem Algorithmus wie "nächster Nachbar" skaliert, der den Kontrast und die Kanten im Bild bewahrt. Generell für Bilder wie Pixelgrafiken oder Strichzeichnungen gedacht, erfolgt keine Unschärfe oder Farbglättung.
pixelated: Das Bild wird mit dem "nächster Nachbar" oder einem ähnlichen Algorithmus auf das nächste ganze Vielfache der ursprünglichen Bildgröße skaliert, und dann unter Verwendung glatter Interpolation auf die endgültige gewünschte Größe gebracht. Dies soll ein "pixeliges" Aussehen bewahren, ohne Skalierungsartefakte zu erzeugen, wenn die hochskalierte Auflösung kein ganzzahliges Vielfaches der ursprünglichen ist.

Hinweis: Die Werte optimizeQuality und optimizeSpeed, die in einem frühen Entwurf vorhanden sind (und von ihrem SVG-Gegenstück image-rendering stammen), sind als Synonyme für die Werte smooth und pixelated definiert.

Hinweis: Das Modul CSS Images definiert einen high-quality-Wert für die image-rendering-Eigenschaft, um eine Präferenz für hochqualitative Skalierung bereitzustellen, jedoch wird dies in keinem Browser unterstützt.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	alle Elemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

image-rendering = 
  auto          |
  smooth        |
  high-quality  |
  pixelated     |
  crisp-edges

Beispiele

Festlegen von Bildskalierungsalgorithmen

In diesem Beispiel wird ein Bild dreimal wiederholt, wobei jedes Mal ein anderer image-rendering-Wert angewendet wird.

<div>
  <img
    class="auto"
    alt="A small photo of some white and yellow flower against a leafy green background. The image is about 33% smaller than the size it is being displayed at. This upscaling causes the image to appear blurry, with notable soft edges between objects."
    src="blumen.jpg" />
  <img
    class="smooth"
    alt="The same photo as the previous image, which is also being upscaled the same amount. Browsers that support the smooth value for the image-rendering property display the image with the maximize appearance."
    src="blumen.jpg" />
  <img
    class="pixelated"
    alt="The same photo as the previous image, which is also being upscaled the same amount. Browsers that support the pixelated value for the image-rendering property display the image as very pixelated. Individual pixels are clearly visible and edges appear much sharper."
    src="blumen.jpg" />
  <img
    class="crisp-edges"
    alt="The same photo as the previous images, which is also being upscaled the same amount. Browsers that support the crisp-edges value for the image-rendering property display the image as very pixelated. In these examples, there is virtually no perceivable difference between the pixelated and crisp-edges versions."
    src="blumen.jpg" />
</div>

img {
  height: 200px;
}

CSS

css

.auto {
  image-rendering: auto;
}

.smooth {
  image-rendering: smooth;
}

.pixelated {
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: crisp-edges;
}

Ergebnis

Spezifikationen

Specification
CSS Images Module Level 3 # the-image-rendering
Scalable Vector Graphics (SVG) 2 # ImageRendering

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden