Aspect ratio

<div class="box" id="box"><span id="label">16 / 9</span></div>

.box{position:relative;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-3));color:#fff;font-weight:700;
  transition:aspect-ratio 1.1s cubic-bezier(.4,0,.2,1),width 1.1s cubic-bezier(.4,0,.2,1),height 1.1s cubic-bezier(.4,0,.2,1);
  aspect-ratio:16/9;box-shadow:0 10px 24px rgba(0,0,0,.15)}
#label{font-size:clamp(11px,2.4vmin,15px);letter-spacing:.03em}

const box = document.getElementById('box');
const label = document.getElementById('label');
const steps = [
  { ratio: '16/9', rw: 16, rh: 9 },
  { ratio: '1/1', rw: 1, rh: 1 },
  { ratio: '4/3', rw: 4, rh: 3 },
  { ratio: '9/16', rw: 9, rh: 16 },
];
let i = 0;
function apply() {
  const s = steps[i];
  box.style.aspectRatio = s.ratio;
  // 장변을 뷰포트에서 더 좁은 쪽(폭 또는 높이)의 82% 로 고정해, 세로로 긴 비율도 잘리지 않게 한다
  const unit = Math.min(innerWidth, innerHeight) * 0.82;
  if (s.rw >= s.rh) {
    box.style.width = unit + 'px';
    box.style.height = 'auto';
  } else {
    box.style.height = unit + 'px';
    box.style.width = 'auto';
  }
  label.textContent = s.ratio.replace('/', ' / ');
  i = (i + 1) % steps.length;
}
apply();
setInterval(apply, 1600);