JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="ava">
  <img src="http://i96.fastpic.ru/big/2017/0801/65/a6bf6064479f865c2d64e25e51243f65.jpg" width="80">
</div>

<br>
<br>

<div class="ava">
  <img src="http://i94.fastpic.ru/big/2017/0801/4d/758881cfff1c51e221bded6053b8564d.jpg">
</div>
</div>

CSS

.wrapper {
  width: 80px;
}
.ava {
  padding: 100%;
  height:0;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #b1b1b1;
  position: relative;
}

.ava img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}