title: IMG in table cell, force max-size but maintain aspect ratio and responsiveness
body: <p>I have a table with an image in the first cell and text in the next.  The page will be viewed with all devices, so I need to keep responsiveness (and the table).</p>
  
  <p>Everything seemed to work - images were centered, are responsive, etc. BUT, some images are just too tall.  So I set a max height, but now the images lose aspect ratio.</p>
  
  <p>If I set the width and height to auto I lose responsiveness, and I can't find a solution that keeps the aspect ratio, sets max width and height and still maintains responsiveness, any pointers?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    width: 90%;
    max-width:800px;
    }
  
  table td {
    padding:10px;
    border-bottom:solid black 2px;
    text-align:center;
    vertical-align:middle;
  }
  table td:first-child {
    width: 50%;
    }
  table td img {
    max-width:180px;
    max-height:70px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&amp;d=identicon&amp;r=PG" width="100%" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
        Blah Blah
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;img src="https://www.google.com/images/srpr/logo3w.png" width="100%"/&gt;
      &lt;/td&gt;
      &lt;td&gt;
        Blah Blah
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>