JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
   <img src="http://placehold.it/350x150">
</div>
    
<div class="container2">
    <img src="http://placehold.it/350x150" class="imageid">
</div>
    
<div class="container2">
    <img src="http://placehold.it/600x300" class="imageid">
</div>

CSS

.container {
    border:1px solid red;
    width: 280px;
    height:310px;
}
.container2 {
    border:1px solid blue;
    width: 280px;
    height:310px;
    overflow: hidden;
    position:relative;
}
.container2 img {
    height:100%;
}
.js-fix {
  position:absolute;
  top:0;
 left:50%;
}

JavaScript

$(".imageid").each(function(){
  var hWide = ($(this).width())/2; //half the image's width

  // attach negative and pixel for CSS rule
  hWide = '-' + hWide + 'px';

  $(this).addClass("js-fix").css({
    "margin-left" : hWide,
  });
});