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.
image-rendering: auto | crisp-edges | pixelated | initial | inherit;
<!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>
