title: Scale Image to Div With Inherited Height
body: <p>I want to fit a png image to the height of a div that is inheriting its height from another div. I have seen how this can be done by setting the image's max-height to 100% (in questions such as this: <a href="https://stackoverflow.com/questions/3029422/image-auto-resize-to-fit-div-container">How do I auto-resize an image to fit a div container</a>), but this only works for me when the image is directly in the div thats height is specified in pixels. </p>
  
  <p>I have a topbar, whose height I set explicitly, and a logodiv inside that, which inherits the height from the topbar. However, the logo does not resize to fit the height of logodiv unless I explicitly set the height (the commented code).</p>
  
  <p>It seems like bad coding to have to set the height twice, when it should be inherited. Is there any way to fit the image to the correct height without doing this?</p>
  
  <p>css:</p>
  
  <pre><code>#topbar{
      width:100%;
      height:45px;
  }
  #logodiv{
      float:left;
      /* height:45px; */
  }
  #logodiv img{
      max-height:100%;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="topbar"&gt;
    &lt;div id="logodiv"&gt;
      &lt;img src="images/project/logo.png" /&gt;
    &lt;/div&gt;      
  &lt;/div&gt;
  </code></pre>