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.
| Valeur initiale | auto |
| Appliquée à | Tous les éléments. |
| Héritée | Oui. |
| Animable | Discrète. |
| Version | CSS3 |
| Syntaxe DOM | object.style.imageRendering = "pixelated"; |
Syntaxe
image-rendering: auto | crisp-edges | pixelated | initial | inherit;Exemple
<!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>Valeurs
| Valeur | Description |
|---|---|
| auto | Un algorithme standard maximisant l'apparence d'une image. C'est la valeur initiale de cette propriété. |
| crisp-edges | Les valeurs de l'image sont préservées sans lissage ni flou. |
| pixelated | Le navigateur conserve son style pixelisé en utilisant la mise à l'échelle du voisin le plus proche. |
| initial | Fait la propriété utiliser sa valeur initiale. |
| inherit | Hérite la propriété de son élément parent. |
Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✕ | 3.6 + | ✓ | ✓ |
Pratiquez vos connaissances
Quelles sont les propriétés de l'image CSS 'image-rendering' selon le site w3docs.com?
Correcte!
Incorrecte!