thumbnail center image

Create a circle avatar from a rectangle image keeping proportions and just using centre of image

by Amitabha Ghosh

HTML

<!-------The 1st Method------------------->
<div class="item-wrapper">
  <image src="http://www.teesbytina.com/Images/ProductFull/36260-3/matte-legging.jpg" />
</div>

<!-------The Second Method----------------------------->
<div class="">
  <div class="item-wrap-2" style="background-image:url('http://www.a-cphotography.com/data/photos/1892_1a_c_photography_restaurants___food_18.jpg');"></div>
</div>

CSS

.item-wrapper{
  position: relative;
  display: inline-block;
  overflow:hidden;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background-size: cover;
  background-position: center center;
  /*background:#fff;*/
}

.item-wrapper > img{
  position: absolute;
  max-width: 100%;
  vertical-align: middle;
  left: 50%;
  top: 50%;
  transform : translate(-50%,-50%);
  /*height: 200px*/
  margin-top:-2px;
  
}

.item-wrap-2{
  position: relative;
  display: inline-block;
  overflow:hidden;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  
}