title: CSS force image resize and keep aspect ratio
body: <p>I am working with images, and I ran into a problem with aspect ratios.</p>
  <pre><code>&lt;img src=&quot;big_image.jpg&quot; width=&quot;900&quot; height=&quot;600&quot; alt=&quot;&quot; /&gt;
  </code></pre>
  <p>As you can see, <code>height</code> and <code>width</code> are already specified. I added a CSS rule for images:</p>
  <pre><code>img {
    max-width: 500px;
  }
  </code></pre>
  <p>But for <code>big_image.jpg</code>, I receive <code>width=500</code> and <code>height=600</code>. How do I set images to be re-sized, whilst keeping their aspect ratios.</p>