<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>percentage heights</title>
	<style> 
		body { margin: 2em; }
		div {margin: 2em; } 
	</style>
</head>

<body>
<p style="display:none;">percentage height images in DIV with no height (red)</p>
<div style="border: 1px solid green;">
<div style="border: 1px solid red;">
  <img height="100%" width="100%" src="../images/raptor.jpg">
</div>
</div>
<p>percentage height images in DIV with no height (red) in a DIV with no height (green)</p>
<div style="border: 3px dotted green;">
 <div style="border: 1px solid red;">
  <img height="100%" src="../images/raptor.jpg">
 </div>
</div>
<p>percentage height image in table cell (red), in a DIV with no height (green)</p>

<div>
<table style="border: 1px solid red;" height="100%">
<tr>
<td style="border: 1px solid red;"><img src="../images/raptor.jpg"></td>
</tr>
</table>
</div>
</body>
</html>