<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>percentage heights</title>
<style>
body { margin: 2em; overflow: hidden; }
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>