title: An Image will not inherit height when in Chrome but will in Firefox
body: <p>So I'm developing a website for someone and the layout works perfectly in Firefox, with the image inheriting height for the table-cell it's in but in Chrome it's setting it's height to 100% of the actual image size.</p>
  
  <p>Here's some sample images:
  <a href="http://imgur.com/a/BEOvk" rel="nofollow">http://imgur.com/a/BEOvk</a></p>
  
  <p>The first one is chrome, the second Firefox. I'm currently only applying the CSS to the first image.</p>
  
  <p>Here is the relevant CSS:</p>
  
  <p>On the image:</p>
  
  <pre><code>  vertical-align:bottom;width:100%;height:100%
  </code></pre>
  
  <p>On the table cell:</p>
  
  <pre><code>#navbar-image{
      border-right-style:solid;
      border-bottom-style:solid;
      border-width:5px;
      border-color:#FF8B08;
      padding:0px;
      margin:0px;
      width:17.5%;
      height:10%;
      max-height:10%;
  }
  </code></pre>
  
  <p>The row CSS:</p>
  
  <pre><code>#nav-bar{
      height:10%;
      max-height:10%;
      padding:0px;
      margin:0px;
      box-shadow: 1px 1px 30px #060606;
      border-left-style:solid;
      border-right-style:solid;
      border-bottom-style:solid;
      border-width:5px;
      border-color:#FF8B08;
      background-color:#252525;
      border-spacing: 0px; 
      position:relative;
      left:25%;
      top:0%;
      z-index:2;
  }
  </code></pre>
  
  <p>Here's a JSFiddle version: <a href="https://jsfiddle.net/yrzccn3j/" rel="nofollow">https://jsfiddle.net/yrzccn3j/</a>
  Any ideas?</p>