title: change image resolution
body: <p>I am trying to switch between different resolutions (original-standard-high) of an image using ONLY one image. Is this possible using any way?
  Here is an example of what I want, but it is using three image with three different resolutions, I want to use only one image. <a href="http://www.biomedcentral.com/1741-7007/8/59" rel="nofollow noreferrer">http://www.biomedcentral.com/1741-7007/8/59</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
  
  &lt;title&gt;resize image &lt;/title&gt;
  &lt;style&gt; 
  .high{width:500px; image-resolution:300dpi; } 
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;img   class="high" src="original.jpg" border="0" /&gt;&lt;!-- the  orginal image width =100 px--&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>