<style>

.thumbnail-wrappper { width: 25%; }

.thumbnail { position: relative; padding-top: 100%; /* 1:1 ratio */ overflow: hidden; } 

.thumbnail .centered { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); } 

.thumbnail .centered img { position: absolute; top: 0; left: 0; max-width: 100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

</style>

<div class="thumbnail-wrapper"> <div class="thumbnail"> <div class="centered"> <img src="xxxx"> </div> </div> </div>

출처: http://webdir.tistory.com/487