TryIt Editor v2.0 - CSS image-rendering code example

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>Image-rendering property example</h2>
    <div class="original">
      <p>Original image size:</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>