JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" class="tbl-center">
    <tr>
        <td style="width: 25%">
            <div class="outer-img-wrap">
                <div class="inner-img-wrap">
                    <div class="img" style="background-image:url(http://placehold.it/64x64)"></div>
                </div>
            </div>
        </td>
        <td>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
    </tr>
    <tr>
        <td style="width: 25%">
            <div class="outer-img-wrap">
                <div class="inner-img-wrap">
                    <div class="img" style="background-image:url(http://placehold.it/400x300)"></div>
                </div>
            </div>
        </td>
        <td>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
    </tr>
    <tr>
        <td style="width: 25%">
            <div class="outer-img-wrap">
                <div class="inner-img-wrap">
                    <div class="img" style="background-image:url(http://placehold.it/128x128)"></div>
                </div>
            </div>
        </td>
        <td>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
    </tr>
</table>
<br>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text...

CSS

.outer-img-wrap {
    border: 2px solid gray;
    margin: 1vw auto;
    max-width: 192px;
    text-align: center;
    overflow: hidden;
}
.outer-img-wrap .img {
    display:inline-block;
    position:relative;
    vertical-align: middle;
    width:100%;
    background-position:center center;
    height:50px; /* or whatever height you want, you could use % value too relative to it's parent element */

    /* cross browser */
    -moz-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
    -webkit-background-size:cover;
    background-size:cover;
}
.inner-img-wrap {
    background: #000;
    border: thin solid #ff9900;
    margin: 2px;
}
.tbl-center {
    width: 100%;
    table-layout: fixed;
}

JavaScript

$("document").ready( function()
{
    function resizeImageElements()
    {
        var imageElements = $(".outer-img-wrap .inner-img-wrap img");
        var imageElementsMaxHeight = -1;
        imageElements.map( function(index) {
            // compare the height of the img element
            if( $(this).height() > imageElementsMaxHeight ) {
                imageElementsMaxHeight = $(this).height();
            }
        } );

        imageElements.map( function(index) {
            var computeTopBottomPadding = ( imageElementsMaxHeight - $(this).height() ) / 2;
            $(this).css( {
                "padding-top": computeTopBottomPadding,
                "padding-bottom": computeTopBottomPadding,
            } );
        } );
    }

    resizeImageElements();

    // Bind the not-at-all throttled handler to the resize event
    $(window).resize( resizeImageElements );

} );