Crop Image css
<style>
.center-cropped {
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
}
</style>
<div class="center-cropped"
style="background-image: url('http://placehold.it/200x200');">
</div>
<!-- REff: http://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image
Other Reff: http://stackoverflow.com/questions/26421274/css-circular-cropping-of-rectangle-image
-->