Constrain an img inside div with max-height, width auto
<p>This simple bit of code works great in WebKit browsers but fails in IE and Firefox. I need to use the <code>img</code> tag for other functionality so <code>background-image</code> is not an option.</p>

<p><strong>Snippet</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>img {
  max-width: 100%;
  height: auto;
}
.vgp-dtable {
  width: 100%;
  max-width: 860px;
  margin: 0 auto 1em;
  display: table;
}
.vgp-dtable .row {
  display: table-row;
}
.vgp-dtable .row .art,
.vgp-dtable .row .txt {
  display: table-cell;
  vertical-align: top;
}
.vgp-dtable .row .art {
  width: 30%;
  text-align: right;
}
.vgp-dtable .row .art img {
  width: auto;
  max-height: 280px;
}
.vgp-dtable .row .txt {
  width: 70%;
  text-align: left;
  padding-left: 8px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="vgp-dtable"&gt;
  &lt;div class="row"&gt;
    &lt;div class="art"&gt;
      &lt;img src="http://vgpavilion.com/mags/1982/12/vg/ads/003-004-005_tn.jpg"&gt;
    &lt;/div&gt;
    &lt;div class="txt"&gt;
      &lt;p&gt;Here's some sample text.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;a id="riddle-of-the-sphinx"&gt;&lt;/a&gt;
  &lt;div class="row"&gt;
    &lt;div class="art"&gt;
      &lt;img src="http://vgpavilion.com/mags/1982/12/vg/thumbs/007.jpg"&gt;
    &lt;/div&gt;
    &lt;div class="txt"&gt;
      &lt;p&gt;Here's some sample text.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>In WebKit the images properly resize to fit the 30% wide container block with a maximum <code>height</code> of 280px. In Firefox and IE, however, only the <code>max-height</code> is respected and the images force their container to become wider than 30%.</p>

<p>A simple example <a href="http://vgpavilion.com/mags/1982/12/vg/ads/test.html" rel="nofollow">here</a>. The simple example has a working version using a <code>float</code> method above the broken <code>display:table</code> implementation.</p>

<p>You can see the full page <a href="http://vgpavilion.com/mags/1982/12/vg/ads/" rel="nofollow">here</a></p>

<p>I have tried a number of combinations of containers and the images will never respect the <code>width</code> unless specified in absolute terms when in Firefox or IE. In a previous instance I went with the <code>background-image</code> solution that works in all tested browsers but really didn't want to. I found a solution by using a <code>float</code> rather than <code>display: table-cell</code> but it's confounding me that it is broken using a nearly identical <code>table</code> method in IE and Firefox so perhaps someone out there can spot something I'm missing or that I shouldn't have added.</p>