Proportional Box

Div with proportional size

HTML

<div class="proportional-wrapper">
    <div>
        Resize the window please <br>
        Resize the window please <br>
    </div>
</div>

CSS

body {
	width: 50%;
    margin: 20px auto;
}

div.proportional-wrapper {
	width: 150%;/* of parent's wide */
	padding-bottom: 40%;/* of parent's wide */
	position: relative;
	background: blue;
}

div.proportional-wrapper > div {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;

	color: white;
	font-size: 24px;
	text-align: center;
}