JSFiddle - React, Tailwind, and code Playground

HTML

<div class="app-container">
      <div class="info">
        <div class="image-box" style="grid-row-start: 1; grid-column-start: 1;">
          <img src="https://images.unsplash.com/photo-1482003297000-b7663a1673f1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
         </div>
      </div>
    </div>

CSS

.app-container {
  width: 100vw;
  height: 100vh;
}

.info {
  display: grid;
  min-height: 0;
}

.image-box {
  display: grid;
  min-height: 0;
}

img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  grid-row: 1;
  grid-column: 1;
}