Resizing while maintaining a set aspect ratio

dabblet.css

/* Resizing while maintaining a set aspect ratio */

.container {     
	width: 500px; /* you only need to change this to resize the element */
}

.container .ratio-4-3 {    
	width: 100%;    
	padding-top: 56.25%; /* set your aspect ratio by changing this... currently set to 16:9 aspect ratio */    
	position: relative;
}

.content {
	box-sizing: border-box;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-image: url("//c2.staticflickr.com/8/7645/27208258473_0a49022518_k.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-color: red;
	border: 4px solid black
}

dabblet.html

<div class="container">
	<div class="ratio-4-3">
		<div class="content">
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}