CSS image-rendering-Eigenschaft

Die image-rendering-Eigenschaft legt einen Skalierungsalgorithmus für Bilder fest.

Standardmäßig wendet jeder Browser beim Skalieren eines Bildes Anti-Aliasing an, um Verzerrungen zu vermeiden. Ein Problem kann jedoch auftreten, wenn Sie die ursprüngliche pixelige Form des Bildes beibehalten möchten.

TIP

Manchmal können Sie crisp-edges und pixelated als Fallbacks füreinander verwenden, um eine konsistente Darstellung in allen Browsern zu gewährleisten.

Startwert	auto
Gilt für	Alle Elemente.
Vererbbar	Ja.
Animierbar	Diskret.
Version	CSS3
DOM-Syntax	object.style.imageRendering = "pixelated";

Syntax

CSS-Syntax für image-rendering

css

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

Beispiel für die image-rendering-Eigenschaft:

Codebeispiel für CSS image-rendering

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .pixelated {
        image-rendering: pixelated;
      }
      .wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }
      .resize {
        flex: 1 1 45%;
      }
      .resize img, .original img {
        width: 100%;
        display: block;
      }
      body {
        background-color: #ccc;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Image-rendering property example</h2>
    <div class="wrapper">
      <div class="original">
        <p>Original image size:</p>
        <img src="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
      <div class="resize">
        <p><code>image-rendering: auto</code></p>
        <img src="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
      <div class="resize">
        <p><code>image-rendering: pixelated</code></p>
        <img class="pixelated" src="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Ergebnis

Liste der CSS image-rendering-Werte

Werte

Wert	Beschreibung
auto	Ein Standardalgorithmus, der das Erscheinungsbild eines Bildes optimiert. Dies ist der Standardwert dieser Eigenschaft.
crisp-edges	Das Bild wird ohne Glättung oder Weichzeichnung beibehalten. Verwenden Sie dies für Pixelgrafiken, von denen eine Kontrasterhaltung profitiert, während `pixelated` eine strenge Nächste-Nachbar-Skalierung erzwingt.
pixelated	Der Browser behält seinen pixeligen Stil bei, indem er eine Nächste-Nachbar-Skalierung verwendet.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Was bewirkt die 'image-rendering'-Eigenschaft in CSS?

Sie passt die Größe des Bildes an.Sie legt den zu verwendenden Bildskalierungsalgorithmus fest.Sie ändert die Hintergrundfarbe des Bildes.Sie sorgt dafür, dass Bitmap-Bilder beim Skalieren schärfer aussehen.Sie erstellt einen Rahmen um das Bild.

CSS image-rendering-Eigenschaft ​

Syntax ​

Beispiel für die image-rendering-Eigenschaft: ​

Ergebnis ​