CSS技术求助：基于窗口宽高的VH单位文本水平缩放异常

我有一个可响应式元素，能适配浏览器窗口并保持固定宽高比。元素内的文本使用VH单位，期望窗口缩放时文本能始终与元素维持固定比例，但当前仅垂直缩放时表现正常，水平缩放时比例会失效。

原HTML代码 #

<section>
  <div class="stagez" style="
        --r: 2000 / 2200;
        aspect-ratio: var(--r);
        width:min(90%, min(2200px, 90vh*(var(--r))));
    ">
    <div class="text_text">TEST</div>
  </div>
</section>

原CSS代码 #

html, body {
  height: 100%;
}

section {
  width: 100%;
  height: 100%;
  display: block;
  margin:0px;
  padding:0px;

}

.stagez {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: linear-gradient(30deg, red 50%, transparent 50%), chocolate;
}


.text_text {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 900;
  color: black;
  font-size: 10vh;
  line-height: 10vh;
}

问题原因 #

文本使用vh单位仅基于视口高度计算大小，当窗口水平缩放时，容器宽度由视口宽度决定（90%），此时容器高度会随宽度按比例变化，但文本大小仍固定参考视口高度，导致文本与容器的比例失调。

解决方案 #

修改文本的字体大小计算逻辑，让文本大小始终基于容器的实际高度，而非单纯的视口高度。通过calc结合容器的宽高比变量，确保文本与容器的比例在任何缩放状态下都保持一致：

修改后的CSS（仅调整.text_text部分） #

.text_text {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 900;
  color: black;
  /* 计算容器实际高度的1/9，和原10vh对应容器90vh的比例一致 */
  font-size: calc( min(90vh, 90vw / var(--r)) * 0.1111 );
  line-height: calc( min(90vh, 90vw / var(--r)) * 0.1111 );
}

逻辑说明 #

• min(90vh, 90vw / var(--r))：取容器的实际高度（当窗口宽高比大于设定的宽高比时，容器高度为90vh；当窗口宽高比小于设定值时，容器高度为90vw / --r）
• * 0.1111：对应原文本10vh占容器高度90vh的比例（10/90≈0.1111），确保文本与容器的比例完全一致

也可以用更简洁的方式，直接使用vmin结合比例调整，效果接近：

.text_text {
  font-size: calc(10vmin / var(--r) * 1.1);
  line-height: calc(10vmin / var(--r) * 1.1);
}

这样修改后，无论窗口垂直还是水平缩放，文本都能与容器保持固定比例。

内容的提问来源于stack exchange，提问作者Weberone