JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="outer">
  <div class="img-box">
  <svg viewBox="0 0 100 100" width="100%" height="100%">
    <rect width="50" height="50" fill="#e3e3e3"></rect>
    <rect x="50" width="50" height="50" fill="#c9c9c9"></rect>
    <rect y="50" width="50" height="50" fill="#c9c9c9"></rect>
    <rect x="50" y="50" width="50" height="50" fill="#e3e3e3"></rect>
  </svg>
</div>
</div>

CSS

.outer, .img-box {
  width: 300px;
}

.img-box {
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
  display: flex;
}

.img-box > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

JavaScript

const aspect = 4/3;
document.querySelector('.img-box').style.paddingBottom = `${(1 / aspect) * 100}%`;