title: Auto-resize an image in CSS without replacing HTML width / height attributes?
body: <p>I'm trying to make an image fit nicely on different screen sizes without breaking the layout. The following bit of CSS helps:</p>
  
  <pre><code>.viewer .main img {
      max-width: 100%;
      height: auto;
  }
  </code></pre>
  
  <p>But the trouble is this image <em>changes</em>. I use a bit of Javascript to create a new img element each time the image changes, instead of reusing the existing one. (This seems a little more reliable for what I'm doing). The browser doesn't know the image's size until it is loaded, creating an obvious flicker in the interim. I deal with that by setting the image's width and height attributes in HTML. <em>Without</em> the above CSS rule, that works fine.</p>
  
  <p>With that CSS, the flickering is still there. For some reason, when I create a new img element, the CSS seems to be causing the browser to ignore its width and height attributes, so. It ends up as ignorant of the aspect ratio as it was before.</p>
  
  <p>Here's a jsfiddle to illustrate the situation:
  <a href="http://jsfiddle.net/7sDtN/" rel="nofollow">http://jsfiddle.net/7sDtN/</a>
  One of the images in there is very very big (138 MB), so be careful if you're on a metered connection :)</p>
  
  <p>What I would love is to get the image to scale according to those dimensions I set in HTML. Preferably in a nice way. A Javascript solution isn't the end of the world (I'm already using it, for course), but if there's an elegant CSS solution that would be very nice.</p>