JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content-wrapper">
    <div class="rk">
        <img src="http://dummyimage.com/900x400/000/fff">
    </div>
    <div class="rk">
        <img src="http://dummyimage.com/800x400/eb59a9/fff">
    </div>
    <div class="rk">
        <img src="http://dummyimage.com/1100x400/cf29cf/fff">
    </div>
</div>

CSS

.rk {
    width:32%;
    height: 200px;
    border-left:solid 1px #000;
    border-right:solid 1px #000;
    text-align:center;
    float: left;
    overflow: hidden;
}
.rk > img {
    width: auto;
    height: 100%;
}

JavaScript

$(document).ready(imgresize);
$(window).on('resize', imgresize);

function imgresize() {
    $(".rk").each(function (index, data) {    
        var rk = $(this).width();
        var img = $(this).find(">:first-child").width();
        var calc = (img - rk) / 2;
        var calc2 = calc - (calc * 2) + 'px';
        $(this).find(">:first-child").css('margin-left', calc2);
    });
}