title: CSS Image Layouting before image loaded
body: <p>For my mobile website I want to show images of different but known heights/widths with two constraints:</p>
  
  <ul>
  <li>The image should take up the whole width of the browserview</li>
  <li>The height should be scaled (down or up) accordingly to keep the proportions</li>
  </ul>
  
  <p>As soon as the browser downloads the image, it is really easy with the following CSS:</p>
  
  <pre><code>&lt;img src="myImageURl" style="width: 100%; height: auto;" /&gt;
  </code></pre>
  
  <p>But because the loading of the image takes some time, I want the browser to layout the image before it downloads it. So the browser does not need to rerender the page, once he fetches the image. I tried the following approaches, which failed:</p>
  
  <pre><code>// The image is not layouted before fetched
  &lt;img src="myImageURl" height="myImageHeight" width="myImageWidth" style="width: 100%; height: auto;" /&gt; 
  
  // The image is layouted, but wrong: height is not proportional to the width anymore
  &lt;img src="myImageURl" style="width: 100%; height: myImageHeight;" /&gt;
  </code></pre>
  
  <p>I would love some help here. But please in CSS, I don't want to use Javascript / jQuery if I don't have to.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I guess I am not the only one with this problem: <a href="https://graphicdesign.stackexchange.com/questions/3274/fluid-images-how-to-set-width-and-height">https://graphicdesign.stackexchange.com/questions/3274/fluid-images-how-to-set-width-and-height</a></p>