Transform: scale using Viewport Units

Question

I want to use a transform: scale where my width changes to 80vw and my height is auto. So this is what i want = transform: scale(80vw, auto);. Unfortunately, this doesnt work. Is there another way to get this effect. Preferably without using javascript.

Answer 1

var range = 1 / 400;
var vw = range * Math.min(window.innerWidth, window.innerHeight);

document.documentElement.style.setProperty('--vw-scale', `${vw}`);

window.addEventListener('resize', () => {
  document.documentElement.style.setProperty('--vw-scale', `${range * Math.min(window.innerWidth, window.innerHeight)}`);
});

.scale-element {
  width: 400px;
  transform: scale(var(--vw-scale));
  transform-origin: left top;
}

h1 {
  font-size: 25px;
}

<div class="scale-element">
  <h1>Test title</h1>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed, et. Deserunt officiis provident quod perferendis dolore dolores enim sint veniam ea odio ratione, repudiandae distinctio, aliquid possimus commodi cupiditate voluptas!
  </p>
</div>

Even though the calc function is not used directly, it works close to it. for test and resize screen you should view it in full page option.