JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-centering block-decor">
    <img src="https://1x.com/images/user/d2d7e82164fd8b3103c8ee091360ab09-ld.jpg" alt="" class="content-centering_element">
</div>

<div class="content-centering  block-decor"><img src="https://1x.com/images/user/6f7efac1b804ea46a3c71bdb26de620e-ld.jpg" alt="" class="content-centering_element"></div>

CSS

.block-decor{
    background-color: #ccc;
    margin: 8px;
    float: left;
}

.content-centering{
    display:flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 300px;
    overflow: hidden;
}

.element_horizont{
    height:100%;
}
.element_vertical{
  max-width:100%;
}

JavaScript

$(document).ready(function() {
  var elems = $('.content-centering_element');
  elems.each(function(){
    var elem = $(this);
    var width = elem.width();
    var height = elem.height();
    if(width < height){
       elem.addClass('element_vertical');
    }else{
       elem.addClass('element_horizont');
    }
  })
});