<div class="original">
  <h1>Original image size</h1> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/qrcode.png" alt="" />
</div>

<div class="resize">
  <h2><code>image-rendering: auto</code></h2>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/qrcode.png" alt="" />
</div>

<div class="resize">
  <h2><code>image-rendering: pixelated</code></h2>
  <img class="pixelated" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/qrcode.png" alt="" />
</div>

.pixelated {
  image-rendering: pixelated;
}

.resize {
  width: 45%;
  clear: none;
  float: left;
   
  &:last-of-type {
    float: right;
  }
  
  img {
    width: 100%;
  }
}

///////////////////////////////

img {
  margin-bottom: 20px;
  max-width: 100%;
}

body {
  background-color: #333;
  color: rgb(250,250,250);
  padding: 20px;
}