CSS CenterFit

dabblet.css

/**
 * CSS CenterFit
 */

.thumbnail-wrapper {
	position: relative;
	height: 100px;
	width: 130px;
	overflow: hidden;
	vertical-align: bottom;
	_line-height: 0;
	day:ispl inline-block;
	margin-bottom: 8px;
	zoom: 1;
	*height: auto;
}

.thumbnail-wrapper .thumbnail-clip {
	position: absolute;
	_position: static;
	bottom: -100px;
	top: -100px;
	left: 0;
	right: 0;
	text-align: center;
	white-space: nowrap;
	word-break: normal;
}

.thumbnail-wrapper .thumbnail-clip-inner {
	position: absolute;
	top: 0;
	left:0; 
	width: 100%;
	height: 100%
}

.thumbnail-wrapper .thumbnail-clip img {
	margin-bottom: 0;
	width: 100%;
}
	
.thumbnail-wrapper .thumbnail-clip img,
.thumbnail-wrapper .thumbnail-clip .valign {
	display: inline-block;
	vertical-align: middle
}

.thumbnail-wrapper .thumbnail-clip .valign {
	height: 100%;
}

dabblet.html

<div class="thumbnail">
	<div class="thumbnail-wrapper">
		<span class="thumbnail-clip">
		    <span class="thumbnail-clip-inner">
		        <img src="http://miguelferaso.com/imgcenterfit/images/vertical-200x400.jpg" alt="">
		         <span class="valign"></span>
		    </span>
		</span>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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