JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Maintain Aspect Ratio 2:1</h2>
<p>Resize the window to see the effect.</p>

  <div class="wrapper">
    <div class="text">2:1 Aspect ratio</div> 
 </div>

CSS

.wrapper {
   width: 50%;
   position: relative
}
.text {
  position:  absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   text-align: center;
   font-size: 20px;
   color: white;
}
.wrapper:after {
  display: block;
  content: "";
  padding-top: 50%;
  background: url(https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg) no-repeat center;
  background-size: contain;
}