CSS-Eigenschaft image-rendering

Die CSS-Eigenschaft image-rendering stellt einen Algorithmus zur Bildskalierung ein.

Standardmäßig wendet jeder Browser Aliasing auf das skalierte Bild an, um Verzerrungen zu vermeiden, aber das kann ein Problem sein, wenn Sie möchten, dass das Bild seine ursprüngliche pixelige Form behält.

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

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .pixelated {
      image-rendering: pixelated;
      }
      .resize {
      width: 45%;
      clear: none;
      float: left;
      }
      .resize:last-of-type {
      float: right;
      }
      .resize img {
      width: 100%;
      }
      img {
      margin-bottom: 20px;
      width: 100%;
      }
      .original img{
      width: 20%;
      }
      body {
      background-color: #ccc;
      padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft Image-rendering</h2>
    <div class="original">
      <p>Ursprüngliche Bildgröße:</p>
      <img src="/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
    </div>
    <div class="resize">
      <p><code>image-rendering: auto</code></p>
      <img src="/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="/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
    </div>
  </body>
</html>

Werte

Wert Beschreibung
auto Ein Standardalgorithmus, der das Aussehen eines Bilds maximiert. Das ist der Standardwert dieser Eigenschaft.
crisp-edges Die Werte des Bildes bleiben ohne Glättung oder Unschärfe.
pixelated Der Browser behält seinen pixeligen Stil bei, indem er die Skalierung des nächsten Elements verwendet.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
3.6 +

Übe dein Wissen

Was sind die möglichen Werte für die CSS-Eigenschaft 'image-rendering'?
Finden Sie das nützlich?