title: Image exceeding div size
body: <p>I have created a header div as follows: </p>
  
  <pre><code>&lt;div class="header"&gt;        
      &lt;div class="row"&gt;           
          &lt;div class="col-lg-2 col-sm-2 col-xs-2 col-md-2"&gt;
              &lt;img class="img-responsive" src="logo.png"/&gt;                
          &lt;/div&gt;          
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the header class:</p>
  
  <pre><code>.header {
      background-color: #5DBCD2;
      height: 10%;
  }
  </code></pre>
  
  <p>Even though the div's max height is restricted to 10%, the image exceeds this.</p>
  
  <p>Can someone please help</p>