Edit in JSFiddle

trimItemImage($('.thumb'));

function trimItemImage(elements, ratio) {
    elements.each(function() {
        var img = $('img', this);

        var ratio = '1:1';
        if (/^\d+?:\d+$/.test($(this).data('ratio'))) {
            ratio = $(this).data('ratio');
        }
        var dimensions = $.map(ratio.split(':'), Number);

        var width = dimensions[0];
        var height = dimensions[1];
        height = Math.floor(height * $(this).width() / width);
        $(this).css('height', height);

        var box_ratio = $(this).width() / height;
        var img_ratio = img.width() / img.height();

        if (img_ratio > box_ratio) {
            $(img).css({
                width: 'auto',
                height: '100%'
            });
        } else {
            $(img).css({
                width: '100%',
                height: 'auto'
            });
        }
    });
}

<div class="wrap">
    <div class="thumb-wrap">
        <div class="thumb">
            <img src="https://picsum.photos/300/200/?random" alt="">
        </div>
    </div>
    <div class="thumb-wrap">
        <div class="thumb">
            <img src="https://picsum.photos/300/200/?random" alt="">
        </div>
    </div>
    <div class="thumb-wrap">
        <div class="thumb">
            <img src="https://picsum.photos/300/200/?random" alt="">
        </div>
    </div>
    <div class="thumb-wrap">
        <div class="thumb">
            <img src="https://picsum.photos/200/300/?random" alt="">
        </div>
    </div>
    <div class="thumb-wrap">
        <div class="thumb">
            <img src="https://picsum.photos/200/300/?random" alt="">
        </div>
    </div>
    <div class="thumb-wrap">
        <div class="thumb">
            <img src="https://picsum.photos/200/300/?random" alt="">
        </div>
    </div>
</div>

<div class="wrap">
    <div class="thumb-wrap">
        <div class="thumb" data-ratio="16:9">
            <img src="https://picsum.photos/300/200/?random" alt="">
        </div>
    </div>
    <div class="thumb-wrap">
        <div class="thumb" data-ratio="16:9">
            <img src="https://picsum.photos/300/200/?random" alt="">
        </div>
    </div>
    <div class="thumb-wrap">
        <div class="thumb" data-ratio="16:9">
            <img src="https://picsum.photos/300/200/?random" alt="">
        </div>
    </div>
    <div class="thumb-wrap">
        <div class="thumb" data-ratio="16:9">
            <img src="https://picsum.photos/200/300/?random" alt="">
        </div>
    </div>
    <div class="thumb-wrap">
        <div class="thumb" data-ratio="16:9">
            <img src="https://picsum.photos/200/300/?random" alt="">
        </div>
    </div>
    <div class="thumb-wrap">
        <div class="thumb" data-ratio="16:9">
            <img src="https://picsum.photos/200/300/?random" alt="">
        </div>
    </div>
</div>

* {
    box-sizing: border-box;
}

.wrap {
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    height: auto;
    margin-left: -10px;
    
    &:nth-of-type(n+2) {
        margin-top: 20px;
    }
}

.thumb-wrap {
    margin-bottom: 10px;
    padding-left: 10px;
    width: (100% / 3);
    
    .thumb {
        position: relative;
        overflow: hidden;
        
        img {
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: auto;
            max-width: none;
            transform: translate(-50%, -50%);
            vertical-align: middle;
        }
    }
}