JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">
  <div class="row-fluid">
    <div class="img-container">
      <img src="http://placehold.it/400x300">
      <!-- <img src="http://placehold.it/2000x450"> -->
      <!-- <img src="http://placehold.it/400x480"> -->
    </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 {
  width: 100vw; /*required for responsive width in Firefox*/
  height: 100vh;
  text-align: center;
  font-size: 0; /*remove whitespace*/
}

.img-container:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.img-container img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}