Untitled

dabblet.css

.img-wrapper {    
	width: 300px;    
	height: 150px;    
	overflow: hidden;    
	position: relative;
	float: left;
	margin: 20px;
}

img {    
	position: absolute;    
	min-width: 100%;    
	min-height: 100%;    
	transform: translate(-50%,-50%);	
	top: 50%;	
	left: 50%;
}

dabblet.html

<div class="img-wrapper"><img src="http://placekitten.com/200/300" /></div>

<div class="img-wrapper"><img src="http://placekitten.com/500/600" /></div>

<div class="img-wrapper"><img src="http://placekitten.com/300/150" /></div>

dabblet.js

// alert('Hello world!');

settings.json

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