<!DOCTYPE html>
<style>
img { height: 50px;}
</style>
<p> The blue square should be 50px by 50px. This is because http://www.w3.org/TR/CSS21/visudet.html#min-max-heights says: "If the height of the containing block is not specified explicitly
(i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height')." </p>
<div>
<img id="image" src="resources/square-blue-100x100.png">
</div>