JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">
  <div class="row-fluid">
    <div class="img-container">
      <div class="image">
        <img src="http://placehold.it/400x300">
        <!-- <img src="http://placehold.it/2000x450"> -->
        <!-- <img src="http://placehold.it/400x480"> -->
      </div>
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container-fluid {
  height: 100%;
  width: 100%;
  display: table;
  padding-right: 0;
  padding-left: 0;
}

.row-fluid {
  height: 100%;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  background-color: #990000;
}

.img-container {
  display: table;
  table-layout: fixed; /*required for responsive width in Firefox*/
  width: 100%; /*required for fixed table layout*/
}

.img-container .image {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 100vh; /*required for responsive height*/
}

.img-container .image img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle; /*remove whitespace*/
}