title: Display image at 50% of its "native" size
body: <p>I'm putting an <code>img</code> tag in a document without knowing the width/height of the corresponding image:</p>
  
  <pre><code>&lt;img src="/myimage.png" /&gt;
  </code></pre>
  
  <p>I want to use CSS to scale the image to exactly half of its "native" size (the size of the underlying image). I can't figure out how to do this.</p>
  
  <ul>
  <li>Using <code>width: 50%</code> would size relative to the containing block, not the image.</li>
  <li>I can't size to a specific pixel width because I don't know the image size.</li>
  <li><p>Since I only need to support WebKit, I've tried using a transform:</p>
  
  <pre><code>-webkit-transform: scale(0.5);
  </code></pre>
  
  <p>This adjusts the image nicely, but doesn't resize the size of the image element itself. </p></li>
  <li>@Radagaisus suggests using Javascript, which is a good fallback. However this is on an ultra lightweight mobile page so I can't use jQuery, and dealing with all the onload() handlers manually would be a pain.</li>
  </ul>
  
  <p>As a postscript: why I am doing this? Because I need to handle the Retina display. I can detect it using <code>devicePixelRatio</code> and fill in larger (2x) images, but I need to scale them down to 50% to look correct on the display.</p>