JSFiddle - React, Tailwind, and code Playground

by Shota Nara

HTML

<div class="parent-box">
</div>

<div class="parent-box box2">
</div>

<div class="parent-box box3">
</div>

CSS

.parent-box{
    width: 90%;
  margin: 10px 5%;
  position: relative;
  background-image: url('http://placehold.it/600x300/dddddd/eeeeee/&text=1:2');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}
.parent-box:after{
  padding-top: 50%; 
  display:block;
  content: '';
}
.box2{
  background-image: url('http://placehold.it/600x150/dddddd/eeeeee/&text=1:4');
}
.parent-box.box2:after{
  padding-top: 25%;
}
.box3{
  background-image: url('http://placehold.it/600x75/dddddd/eeeeee/&text=1:8');
}
.parent-box.box3:after{
  padding-top: 12.5%;
}