JSFiddle - React, Tailwind, and code Playground

HTML

<body>    
    <a class="i-img-cont ihaveproblem" href="#">
        <img alt="" src="http://habrastorage.org/storage2/43f/497/d66/43f497d66e2cf86f84e40813ed7e1678.png"/>
    </a>
    <a class="i-img-cont" href="#">
        <img alt="" src="http://habrastorage.org/storage2/43f/497/d66/43f497d66e2cf86f84e40813ed7e1678.png"/>
    </a>
    <a class="i-img-cont" href="#">
        <img alt="" src="http://img.leprosorium.com/1747895"/>
    </a>
    <a class="i-img-cont" href="#">
        <img alt="" src="http://habrahabr.ru/i/avatars/stub-user-small.gif"/>
    </a>
</body>

CSS

body{background:#333;}
.i-img-cont.ihaveproblem img{border-radius:1px;}
.i-img-cont.ihaveproblem canvas{display:none;}
.i-img-cont{width: 150px;height: 150px;text-align: center;border-radius:150px;background:#eee;float:left;margin:5px;max-width:150px;overflow:hidden;position:relative;}
.i-img-cont img{max-width:150px;max-height:150px;position:relative;top:50%;}
.i-img-cont canvas{border-radius:1px;}

JavaScript

//vertical center img
$('.i-img-cont').each(function(){
	$(this).find('img').css('margin-top', parseInt(-$(this).find('img').height()/2));
});	
//canvas replace
var i=0, mywidth, myheight;		
$('.i-img-cont').each(function(){
    var contWidth = $(this).width(),
        contHeight = $(this).height(),
        cnv = document.createElement("canvas");
    cnv.width=contWidth;
    cnv.height=contHeight;					
    $(this).prepend(cnv);
    i++;
    var j=i-1;
    $(this).find('canvas').attr('id', 'canvas'+j);
    var ctx = document.getElementById('canvas'+j).getContext('2d'),
        img = new Image(),
        attrsrc=$(this).find('img').attr('src');
    img.src = attrsrc;				
    img.onload = function(){
        mywidth = $('#canvas'+j).next('img').width();
        myheight = $('#canvas'+j).next('img').height();
        var xpos = (contWidth-mywidth)/2,
        ypos = (contHeight-myheight)/2;
        ctx.drawImage(img, xpos, ypos, mywidth, myheight);	
    }	
});