JSFiddle - React, Tailwind, and code Playground

HTML

<!-- use a tall image to illustrate the problem -->
<div class='fill-screen'>
<img class='make-it-fit' src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
</div>

CSS

div.fill-screen {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}
img.make-it-fit {
    max-width: 99%;
    max-height: 99%;
}