JSFiddle - React, Tailwind, and code Playground

by Ketan Patel

HTML

<div class="container"><img src="http://i.stack.imgur.com/2OrtT.jpg"/></div>
<div class="container"><img src="https://journal.werpn.com/wp-content/uploads/2021/08/MiguelsStory_1060x517-01.png"/></div>

CSS

.container{width:300px; height:200px; display:block; position:relative;overflow:hidden;}
.container img{position:absolute; top:0; left:0; width:100%;}

JavaScript

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight)/2;
$(".container img").css("margin-top",-gap);