Calculate desired height of scaled down element

Question

I'm using CSS transform: scale(0.6) to scale down a div. When the element is scaled down, it maintains its aspect ratio. However, in my case, this element needs to always have a height that will reach the bottom of the viewport. This means I need to adjust the height of the element while keeping its width and top position the same.

How do I calculate the height I need to apply so that the element reaches the bottom of the viewport exactly when transform: scale(x) is applied?

 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

Your snippet works if you replace scale(n) with scaleX(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>

Are you looking for a solution to a more general case?