title: CSS Image height restrict to parent div height. Parent div width and height are specified in percentages***
body: <p>How to restrict the height of an image to its parent container whose height is specified in terms of percentages?</p>
  
  <p>I want the image to span over the parent if image width/height > parent width/height.
  and image to be center aligned to parent if image width/height &lt; parent width/height.
  In any case I dont want the image to be stretched[vertically/horizontall.]</p>
  
  <pre><code>html, body{
      width:100%;
      height:100%;
  }
  
  #top{
      height:10%;
  }
  
  #middle{
      height:80%;
  }
  
  #bottom{
      height:10%;
  }
  
  img{
      width: how much?
      height: how much?
  }
  </code></pre>
  
  <p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;div id="top"&gt;I am top&lt;/div&gt;
          &lt;div id="middle"&gt;
              &lt;img src="/images/abc.jpg" /&gt;
          &lt;/div&gt;
          &lt;div id="bottom"&gt;I am bottom&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>