JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div>
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-avatar" style="background-image:url(http://placekitten.com/g/200/400)">
            </div>
        </div>
        <div class="col-xs-6">
             <div class="circle-avatar" style="background-image:url(http://placekitten.com/g/400/200)">
        </div>
        </div>
    </div>
</div>

CSS

div.circle-avatar{
    /* make it responsive */
    max-width: 100%;
    width:100%;
    height:auto;
    display:block;
    /* div height to be the same as width*/
    padding-top:100%;
    
    /* make it a cirkle */
    border-radius:50%;
    
    /* Centering on image`s center*/
    background-position-y: center;
    background-position-x: center;
    background-repeat: no-repeat;
    
    /* it makes the clue thing, takes smaller dimention to fill div */
    background-size: cover;

    /* it is optional, for making this div centered in parent*/
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }