Creating-intrinsic-ratios

create a “magic wrapper”—a container that proportionally resizes itself depending on the width of its parent. The padding property is the magic that styles a box with an intrinsic ratio. This is because we’ll set padding in a percentage, based on the width of the containing block.

by fezec

HTML

<div class="wrapper-with-intrinsic-ratio"><div class="element-to-stretch"></div></div>

CSS

.wrapper-with-intrinsic-ratio {
	position: relative;
	padding-bottom:50%;  //intrinsic, IE based on itself not its marterial;
    background:red;
	height: 0;
    margin:0;
}

.element-to-stretch {
	position: absolute;
	width: 100%;
	height: 100%;
	background: teal;	
    margin:0;
}