JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <img src="https://stimg.cardekho.com/images/carexteriorimages/630x420/Audi/Audi-Q3/5912/front-left-side-47.jpg" alt="">
  <p>
    Audi Q3
  </p>
</div>

CSS

.wrapper{
  position: relative;
  width: 300px;
  height: 400px;
  border: 2px solid #000
}
img{
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%,-50%)
}