aspect-ratio

<iframe id="outer">
  <div id="inner">
    ビューポートの幅と高さを変更しながら、この要素を見ていてください。
  </div>
</iframe>

/* 最小アスペクト比 */
/* アスペクト比が 8/5 = 1.6 以上である場合に選択 */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #99f; /* 青 */
  }
}

/* 最大アスペクト比 */
/* アスペクト比が 3/2 = 1.5 以下である場合に選択 */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9f9; /* 緑 */
  }
}

/* 正確なアスペクト比。上書きを防ぐために最下部に配置 */
@media (aspect-ratio: 1/1) {
  div {
    background: #f99; /* 赤 */
  }
}

<label id="wf" for="w">width:165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165" />
<label id="hf" for="w">height:165</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165" />
<label id="ratio">aspect-ratio: 165/165 = 1</label>

<iframe
  id="outer"
  srcdoc="<style> @media (min-aspect-ratio: 8/5) { div { background: #99f; } } @media (max-aspect-ratio: 3/2) { div { background: #9f9; } } @media (aspect-ratio: 1/1) { div { background: #f99; } }</style><div id='inner'>ビューポートの幅と高さを変更しながら、この要素を見ていてください。</div>">
</iframe>

iframe {
  display: block;
  border: 1px dashed black;
}

outer.style.width = outer.style.height = "165px";

const updateRatio = () => {
  ratio.textContent = `aspect-ratio: ${w.value}/${h.value} = ${(w.value / h.value).toFixed(2)}`;
};

w.onchange = w.oninput = () => {
  outer.style.width = `${w.value}px`;
  wf.textContent = `width: ${w.value}`;
  updateRatio();
};

h.onchange = h.oninput = () => {
  outer.style.height = `${h.value}px`;
  hf.textContent = `height: ${h.value}`;
  updateRatio();
};