aspect ratio

by lovromar

HTML

<figure>
	<div class="stretchy-wrapper">
		<div>Relative Aspect Ratio! Try resizing the browser.</div>
	</div>
</figure>

CSS

figure {
	width: 36%;
	margin: 8px auto;
}
 
div.stretchy-wrapper {
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	position: relative;
	background: black;
}
 
div.stretchy-wrapper > div {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	color: white;
	font-size: 24px;
	text-align: center;
}