title: Fixed height but responsive images
body: <p>I have a set of logos of variable size. I've set them all up at the same height of <code>50px</code> with a width of <code>auto</code>:</p>
  
  <pre><code>.img-logo {
     width: auto;
     height: 50px;
  }
  </code></pre>
  
  <p>This works fine until the window is resized. When the window is resized, wider logos flow outside of their container. </p>
  
  <p>I would like the logos to shrink to fit their container width. I have tried to achieve this with max-width:</p>
  
  <pre><code>.img-logo {
     max-width: 100%;
     width: auto;
     height: 50px;
  }
  </code></pre>
  
  <p>This works but the aspect ratio is compromised due to the height property remaining 50px.</p>
  
  <p>Any ideas?</p>