title: Fluid image that has initial size specified
body: <h3>Goal</h3>
  
  <p>I need an image that doesn't rearrange my layout when it's done loading <strong>and</strong> is fit inside a container.</p>
  
  <h3>Rationale</h3>
  
  <ol>
  <li>Rearranging part: without taking any action, I'll just see small block with a text taken from the <code>alt</code> attribute. When the image is finished loading, the text is replaced with an actual content, making the layout suddenly rearrange itself. This degrades user experience - many things are happening on screen at once, etc.</li>
  <li>As for the being fit inside a container - the image can be very big. Like, <code>6000x3000</code> NASA scans big.</li>
  </ol>
  
  <h3>The obvious approach</h3>
  
  <p>I specified image's <code>width</code> and <code>height</code>. So, basically, I have <code>&lt;img src="640" height="480" alt="whatever"/&gt;</code> and it knows its size immediately, so the layout doesn't rearrange.</p>
  
  <p>Then I added <code>img { max-width: 100%; }</code>.</p>
  
  <p>But this screwed up aspect ratio of large images - it took width from container and height from <code>height="..."</code> image attribute.</p>
  
  <p>So I changed that rule to <code>img { max-width: 100%; height: auto; }</code>, like numerous posts here on StackOverflow and on the Internet suggest.</p>
  
  <p>This works... but the first problem strikes back. My image, having now its height set to <code>auto</code> with CSS, ignores its <code>height="..."</code> attribute and is rendered initially as an unsized <code>alt</code> text again.</p>
  
  <h3>Other things I've tried</h3>
  
  <ul>
  <li>I've tried applying restrictions to the container. Doesn't help much, the image just overflows.</li>
  <li>I've tried to use Javascript, by adding <code>height: auto</code> rule only after the image is loaded. This works unexpectedly bad: after the image is finished, it flashes for a brief time with wrong aspect ratio, and then suddenly it corrects itself thanks to <code>height: auto</code> (Firefox). I don't want to hide it for loading time either, because it can be animated and keeping viewers for too long from seeing the content is not acceptable.</li>
  <li>I've given some thought to using <code>background-size</code>, but I'll have hard time keeping the aspect ratio of its <code>div</code>.</li>
  <li>I'm not sure about <code>object-fit</code>. It seems to be helpful in such cases, but according to <a href="http://caniuse.com/object-fit" rel="nofollow">caniuse.com</a>, it's not exactly production-ready yet.</li>
  </ul>
  
  <p>This seems like an elementary problem. Is there any simple way of achieving both goals at the same time?</p>