Define aspect ratio for elements in CSS

dabblet.css

/**
 * Define aspect ratio for elements in CSS
 */

div {
	height: 0;
	width: 33%;
	padding-bottom: 33%;

	float: left;
	outline: 1px solid;
	overflow: hidden;
}

marquee {
	font-size: 140px;
}

dabblet.html

<div>
	<h1>
		CAN I HAZ ASPECT RATIO BOXES?
	</h1>
</div>

<div>
	<img src="http://placekitten.com/g/500/500">
</div>

<div>
	<marquee>YES!</marquee>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}