w3docs logo

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

chrome edge firefox safari opera
✓ ✕ 3.6 + ✓ ✓

Pratiquez vos connaissances

Quelles sont les propriétés de l'image CSS 'image-rendering' selon le site w3docs.com?
Trouvez-vous cela utile?