JSFiddle - React, Tailwind, and code Playground

HTML

<body>    
    <a class="i-img-cont test1" href="#">
        <img alt="" src="http://habrastorage.org/storage2/43f/497/d66/43f497d66e2cf86f84e40813ed7e1678.png"/>
    </a>
    <a class="i-img-cont test2" href="#">
        <img alt="" src="http://habrastorage.org/storage2/43f/497/d66/43f497d66e2cf86f84e40813ed7e1678.png"/>
    </a>
    <a class="i-img-cont test3" href="#">
       
    </a>
</body>

CSS

body{background:#333;}
.i-img-cont {
    position: relative;
    width: 150px;
    height: 150px;
    overflow: hidden;
    background: white;
    border-radius: 150px;
    display: block;
}
img {
    max-height: 120%;
    max-width: 120%;
}

.i-img-cont.test1 img {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}


.i-img-cont.test2 img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.i-img-cont.test3 {
    background-image: url(http://habrastorage.org/storage2/43f/497/d66/43f497d66e2cf86f84e40813ed7e1678.png);
    background-position: center;
    background-size: 170px;
    background-repeat: no-repeat;
}