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>

Versuch es selber!

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.