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
✓ | ✕ | 3.6 + | ✓ | ✓ |
Übe dein Wissen
Was sind die möglichen Werte für die CSS-Eigenschaft 'image-rendering'?
Richtig!
Falsch!