计算按比例缩小元素的所需高度

Question

我正在使用 CSS transform: scale(0.6) 来缩小 div。当元素按比例缩小时，它会保持其纵横比。然而，在我的例子中，这个元素需要总是有一个可以到达视口底部的高度。这意味着我需要调整元素的高度，同时保持其宽度和顶部位置相同。

如何计算我需要应用的高度，以便在应用transform: scale(x) 时元素正好到达视口底部？

document.body.addEventListener('click', () => {
  document.querySelectorAll('div')[0].style.transform = 'scale(0.44)';
});

body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

div {
  width: 350px;
  height: 100%;
  position: absolute;
  top: 0px;
  background-color: red;
  position: absolute;
  transform-origin: top;
}

<div><h1>TEST</h1></div>

Answer 1

如果您将 scale(n) 替换为 scaleX(n)，则您的 sn-p 有效

document.body.addEventListener('click', () => {
  document.querySelectorAll('div')[0].style.transform = 'scaleX(0.44)';
});

body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

div {
  width: 350px;
  height: 100%;
  position: absolute;
  top: 0px;
  background-color: red;
  position: absolute;
  transform-origin: top;
}

<div></div>

您是否正在寻找更一般情况的解决方案？