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

Question

我使用CSStransform: 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

如果用scaleX(n(替换scale(n(，您的代码段就可以工作

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>

你在寻找一个更普遍的案例的解决方案吗？