Propriété CSS image-rendering
La propriété image-rendering définit l'algorithme de redimensionnement des images.
Par défaut, chaque navigateur appliquera un repliement sur l'image redimensionnée afin d'éviter toute distorsion, mais cela peut poser problème si vous souhaitez que l'image conserve sa forme pixelisée d'origine.
image-rendering: auto | crisp-edges | pixelated | initial | inherit;
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</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>Exemple de la propriété image-rendering</h2>
<div class="original">
<p>Taille originelle:</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>
