title: Resize img height according to div height
body: <p>Hello everybody,</p>
  
  <p>I have this CSS that acts weirdly and i dont' understand why. Please help undestand why:</p>
  
  <p>THE CSS</p>
  
  <pre><code>html body{
  width:100%;
  height:100%;
  background-color:#000;
  margin:0;
  }
  
  
  .top
  {
  margin-left:7.5%;
  margin-right:7.5%;
  height:8.1%;  width:85%;
  position:relative;
  border-bottom:#FFFFFF solid thin;
  }
  .top img
  {
  height:100%;
  }
  </code></pre>
  
  <p>THE HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="top" align="center"&gt;
  &lt;img src="images/titlu_trans.png" alt="Sigla companie Calin Events"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now Safari interpret's this correctly by setting the div height to 8.1% of the total resolution height and then the img height at 100% of the div height so at 8.1% of the viewing resolution. But Chrome, on a Windows machine does not and interprets this by setting the img's height at 100% of the viewing resolution height. Why is this happening?</p>