JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <div class="inner">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
  </div>
</div>

CSS

* {
  margin:0;
  padding:0;
}
.outer {
  top:0;
    position: relative;
    background: red url("https://4.bp.blogspot.com/-k8IX2Mkf0Jo/U4ze2gNn7CI/AAAAAAAA7xg/iKxa6bYITDs/s0/HOT+Balloon+Trip_Ultra+HD.jpg") no-repeat;
    background-size: contain;
    padding-bottom: 56.25%;
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}