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>

CSS

.wrapper {
   width: 50%;
}
.wrapper:after {
  content: "";
  display: block;
  padding-top: 50%;
  background: url(https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg) no-repeat center;
  background-size: contain;
}