Square avatars with CSS

dabblet.css

/**
 * Square avatars with CSS
 */
 	
.img.square {
	width: 54px;
	height: 54px;
	overflow: hidden;
	display: inline-block;
	background-size: cover;
	background-position: center;
	border-radius: 3px; }	
	
.img.square img {
	visibility: hidden; }

dabblet.html

<h1>Before:</h1>
<img src="http://s3.amazonaws.com/images.couchsurfing.us/MICBP/115976_t_718aa2b69a929aa9f57c00e7b047174b.jpg">
<img src="http://s3.amazonaws.com/images.couchsurfing.us/1328T0/1254512_t_883c319f6aa08605781ab48441f2ad61.jpg">
<img src="http://s3.amazonaws.com/images.couchsurfing.us/A2P/6575751_t_67e6445ef4fba3cc6dcb1d42881b8cb8.jpg">
<img src="http://s3.amazonaws.com/images.couchsurfing.us/SHNP/7898996_t_624d9b94da62c5444e1ff72b6e426fb1.jpg">
<h1>After:</h1>
<div class="img square" style="background-image: url(http://s3.amazonaws.com/images.couchsurfing.us/MICBP/115976_t_718aa2b69a929aa9f57c00e7b047174b.jpg);">
	<a href="#">
		<img src="http://s3.amazonaws.com/images.couchsurfing.us/MICBP/115976_t_718aa2b69a929aa9f57c00e7b047174b.jpg">
	</a>
</div>
<div class="img square" style="background-image: url(http://s3.amazonaws.com/images.couchsurfing.us/1328T0/1254512_t_883c319f6aa08605781ab48441f2ad61.jpg);">
	<a href="#">
		<img src="http://s3.amazonaws.com/images.couchsurfing.us/1328T0/1254512_t_883c319f6aa08605781ab48441f2ad61.jpg">
	</a>
</div>
<div class="img square" style="background-image: url(http://s3.amazonaws.com/images.couchsurfing.us/A2P/6575751_t_67e6445ef4fba3cc6dcb1d42881b8cb8.jpg);">
	<a href="#">
		<img src="http://s3.amazonaws.com/images.couchsurfing.us/A2P/6575751_t_67e6445ef4fba3cc6dcb1d42881b8cb8.jpg">
	</a>
</div>
<div class="img square" style="background-image: url(http://s3.amazonaws.com/images.couchsurfing.us/SHNP/7898996_t_624d9b94da62c5444e1ff72b6e426fb1.jpg);">
	<a href="#">
		<img src="http://s3.amazonaws.com/images.couchsurfing.us/SHNP/7898996_t_624d9b94da62c5444e1ff72b6e426fb1.jpg">
	</a>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}