title: How to make height correspond to width
body: <p>I am working on images with CSS and added this rule to the style sheet:</p>
  
  <pre><code>.sideimage {
    width: 200px;
  }
  </code></pre>
  
  <p>What this does to the images is that it makes the width <code>200px</code> but the height is still the original one so the images are now out of proportion (the height is far too long).</p>
  
  <p>I tried adding <code>height: auto;</code> to the rule but it didn't help:</p>
  
  <pre><code>.sideimage {
    width: 200px;
    height: auto;
  }
  </code></pre>
  
  <p>There must be a simple solution to this but I haven't been able to come across it yet.</p>
  
  <p>This is what the html looks like (not sure what is meant by stacksnippet):</p>
  
  <pre><code>&lt;section&gt;
  &lt;img class="sideimage" src="images/helgafell.jpg" alt="Helgafell"&gt;
  &lt;h1&gt;Helgafell&lt;/h1&gt;
  &lt;/section&gt;
  </code></pre>