title: Set width/height of image to avoid reflow on image load
body: <p>When I use image tags in html, I try to specify its width and height in the <code>img</code> tag, so that the browser will reserve the space for them even before the images are loaded, so when they finish loading, the page does not reflow (the elements do not move around). For example:</p>
  
  <pre><code>&lt;img width="600" height="400" src="..."/&gt;
  </code></pre>
  
  <p>The problem is now I want to create a more "responsive" version, where for the "single column case" I'd like to do this:</p>
  
  <pre><code>&lt;img style="max-width: 100%" src="..."/&gt;
  </code></pre>
  
  <p>but, if I mix this with explicitly specified width and height, like:</p>
  
  <pre><code>&lt;img style="max-width: 100%" width="600" height="400" src="..."/&gt;
  </code></pre>
  
  <p>and the image is wider than the available space, then the image is resized ignoring the aspect ratio. I understand why this happens (because I "fixed" the height of the image), and I would like to fix this, but I have no idea how.</p>
  
  <p>To summarize: I want to be able to specify <code>max-width: 100%</code>, and also somehow make sure the content is not reflowed when the images are loaded.</p>