title: Html - Image height (percentage) in container
body: <p>my problem is quite simple but I still cannot find the answer for this one...</p>
  
  <p>Say we have two containers containing an Image.</p>
  
  <pre><code>&lt;div id="containera"&gt;
  &lt;div id="containerb"&gt;
  &lt;img id="imagea" src="image.jpg"/&gt;
  
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and we have something like </p>
  
  <pre><code>#containera { width: 50%; height: 50%; background-color:blue;}
  #containerb { width: 80%; height: 80%; background-color:red;}
  #imagea { height:100%; width:auto;}
  </code></pre>
  
  <p>Problem is: The Image height is FULL SCREEN height and NOT 100% containerb (80% of 50% screenheight). </p>
  
  <p>I want the Image to be 100% height of containerb, not 100% height of the screen. 
  Weird: If i work with "width", the width is scaled depending on the width of containerb.</p>
  
  <p>Can I somehow restrict the height of the containers so they dont scale the image to 100% screenheight? tried max-height in tons of variations but it did not work in any way...</p>
  
  <p>Thanks, if you have any idea how i could solve this.. </p>