title: Image Set Width Height Attributes in HTML, Set Width 100% in CSS
body: <p>I have an image whose size I know.</p>
  
  <pre><code>&lt;img class="example" src="img.jpg" width="1024" height="768" /&gt;
  </code></pre>
  
  <p>I want to have the width and height attributes set so it can layout where the image will be <strong>before it's downloaded</strong>. The image may take a second or two to come in, so when it does, I don't want the page to suddenly jump.</p>
  
  <p>However, I also want the image to have <code>width: 100%</code>. Is there a way to achieve this using CSS?</p>
  
  <p>I tried</p>
  
  <pre><code>.example {
      width: 100%;
      height: auto;
  }
  </code></pre>
  
  <p>However, this ignores the aspect ratio I specified in the HTML. Is there a way I can use the width and height attributes defined in the HTML to keep the aspect ratio, but have the image to have <code>width: 100%</code> (i.e. the width of the parent)?</p>
  
  <p>I don't want to use JS to achieve this, I don't want to hard code the proportions in CSS, and I'd rather not do any margin/padding hacks to achieve this.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Really, I'm just seeing if there's a better way of doing it than this,</p>
  
  <p><a href="https://jsfiddle.net/s6gkonbh/" rel="nofollow">https://jsfiddle.net/s6gkonbh/</a></p>