title: Preserve image aspect ratio with the height fixed
body: <p>I am working with some icons in a table and I am looking to keep the aspect ratio of the icons.</p>
  
  <p>The heights all have to be the same (18px) but the width can vary.</p>
  
  <p>I have seen other solutions for these when the width is fixed and height is set to auto like below <a href="https://stackoverflow.com/questions/757782/how-to-preserve-aspect-ratio-when-scaling-image-using-one-css-dimension-in-ie6" title="this solution">this solution</a></p>
  
  <pre><code>img {
    width:  75px;
    height: auto;
  }
  </code></pre>
  
  <p>Some sample code is below for my table (at least just one cell in the table)</p>
  
  <pre><code>&lt;td class="set_symbol" style="text-align: center;"&gt;
    &lt;img src="/static/img/symbols_large/Gatecrash_Uncommon.gif" style="height: 18px;"&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>What I would like to do is to keep the height of the image at 18px and have the width be whatever fits the aspect ratio.</p>
  
  <p>Also, I have no qualms about browsers. So if it takes CSS3 or whatever, doesn't matter.</p>