Responsive Images

dabblet.css

/* Responsive Images */

.r-img {
	background-size: 100%;
	display: inline-block;
	zoom: 1;
	*display: inline; /* Mimic inline-block on old IE */
}

@media screen and (max-width: 600px) { /* Hide background on low res */
	.r-img {
		background: none !important;
	}
}

.r-img img {
	display: block;
	position: relative;
}

@media screen and (min-width: 600px) {
	.r-img img {
		opacity: 0;
	}
}

dabblet.html

<div class=r-img style="background-image: url(http://placedog.com/256/256);">
	<img src="http://placedog.com/128/128">
</div>

settings.json

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