<html> 
    <head> 
        <style type='text/css'>
            .container {
                position: absolute;
                top: 30px;
                bottom: 30px;
                width: 300px;
                background: yellow;
                border: 2px dashed black;
            }
            .test {
                height: 50%;
                width: 296px;
                background: blue;
                border: 2px dashed black;
            }
        </style>
    </head>
    <body>
        <p>The inner blue image should be 50% as tall as the outer yellow box.</p>
        <div class="container">
            <img class="test" src="resources/square-blue-100x100.png">
        </div>
    </body>
</html>