<div id="object" />
</div>
<h2 id="aspectRatio">Aspect Ratio: 16 / 9</h2>
<p id="dimensions"></p>

*,
*:before,
*:after {
  box-sizing: border-box;
}

:root {
  --ratio-w: 16;
  --ratio-h: 9;
  --w: 80;
  --aspect-ratio: calc(var(--ratio-w) / var(--ratio-h));
}

h2,
p {
  text-align: center;
}

#object {
  display: block;
  width: calc(var(--w) * 1vmin);
  margin: 0 auto;
  aspect-ratio: var(--aspect-ratio);
  object-fit: cover;
  background: linear-gradient(#e66465, #9198e5);
  border: grey 1px solid;
  font-weight: bold;
}

@supports not (aspect-ratio: 16 / 9) {
  #object {
    position: relative;
    width: 8rem;
    height: 6rem;
  }

  #object::after {
    position: absolute;
    content: "aspect-ratio not supported in this browser";
  }
}

import dat from "https://cdn.skypack.dev/dat.gui";

let aspectRatio = document.getElementById("aspectRatio");
const gui = new dat.GUI({});
const config = {
  w: 16,
  h: 9
};

gui
  .add(config, "w")
  .min(1)
  .max(50)
  .step(1)
  .name("Ratio Width")
  .onChange(() => {
    updateText();
  });

gui
  .add(config, "h")
  .min(1)
  .max(50)
  .step(1)
  .name("Ratio Height")
  .onChange(() => {
    updateText();
  });

updateText();

window.addEventListener("resize", () => {
  updateText();
});

function updateText() {
  let root = document.documentElement;
  root.style.setProperty("--ratio-w", config.w);
  root.style.setProperty("--ratio-h", config.h);
  aspectRatio.innerText = `Aspect Ratio: ${config.w} / ${config.h}`;

  let dim = document.getElementById("dimensions");
  let obj = document.getElementById("object");
  dim.innerText = `Width: ${obj.offsetWidth}px, Height: ${obj.offsetHeight}px`;
}