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

body {
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  gap: 24px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.box {
  position: relative;
  padding-bottom: calc((var(--aspect-y, 9) / var(--aspect-x, 16)) * 100%);
  background: #4169e1;
}

.box::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font: 24px Consolas, monospace;
  color: #ffffff;
  counter-reset: aspect-x var(--aspect-x) aspect-y var(--aspect-y);
  content: counter(aspect-x) ' × ' counter(aspect-y);
  overflow: hidden;
}

.box:nth-child(1) {
  --aspect-x: 16;
  --aspect-y: 9;
}

.box:nth-child(2) {
  --aspect-x: 16;
  --aspect-y: 10;
}

.box:nth-child(3) {
  --aspect-x: 4;
  --aspect-y: 3;
}