A box with an intrinsic ratio

To create a box with an intrinsic ratio, all we need to do is apply top or bottom padding to a div.

No matter the width of the viewport, the teal box below should keep its aspect ratio (5:1).

CSS

.wrapper-with-intrinsic-ratio {
	position: relative;
	padding-bottom: 20%;
	height: 0;
}
.element-to-stretch {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: teal;	
}

Markup

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