JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div id="inner">
    content here ...
  </div>
</div>
OR
<div class="wrapper">
  <img src="http://placehold.it/1000x200?text=an+img+which+is+responsive" /><br>
</div>

CSS

* { box-sizing: border-box; }
html, body {
  height: 100%;
  background: #fff;
}
.wrapper {
  width: 100%;
  height: 40%; /* use 100% here */
  position: relative;
  padding: 30px;
  background: #fafafa;
}
#inner, img {
  width: calc(100% - 60px);
  max-height: calc(100% - 60px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
#inner {
  background: #fff;
  padding: 10px;
}