Emergency - CSS - Scale - Calc - Viewport - css

Question

I'm not a coder (which will soon become apparent) but I'm working on something for a work project and I'm stuck on the final bit.
I need to add a calc() working into the scale but it just won't work. Without going in to the in's and outs of why I need this, I know generally there would be better ways of doing what I want to achieve but I just want to know how I can get this working the way I need it.
I want the Transform: Scale() to adapt in size relative to the viewport size. I would assume from my research I add a calc() function using 100vw and my other workings.
I've put where I am so far below the scale function works as should i.e indivual values from 0-1 change the scale up to 100%. The Calc() function works fine with basic sums i.e 10 - 5 gives a value of 5 and 500% zoom but as soon as I add 100VW it stops working please please help!
body {
margin: 0;
padding: 0;
width: 100vw;
text-align: center;
}
#wrap {
width: 1535;
height: 900;
padding: 0;
overflow: hidden;
}
#frame {
width: 1535;
height: 900;
overflow: hidden;
-webkit-transform: scale(calc(100vw/1535));
-webkit-transform-origin: 0 0;
}

Answer 1

Two things here.
Your #wrap and #frame need to have some kind of unit on their widths. So this is your chance to change sizes relative to the viewport. For example, if you want them to be 1535px wide when the viewport is 1920px wide, but you want them to maintain that ratio as the viewport shrinks, set them to be 79.947917vw wide. (1535 / 1920 = 0.79947917). You can do something similar with the heights as well.
A scale transformation doesn't need units. Scales take a unitless number, which serves as a multiple of the element's original size. So scale(2) is twice as large as normal, or scale(0.5) is half as large as normal. You can also use two numbers to adjust the element's width and height differently. For example, scale(2, 3) would make the element grow to twice its original width and three times its original height.
Since transforms are relative to the element and not to the document, this means that you don't need to use any kind of calc inside your transform expression because having the element itself shrink and grow as the viewport shrinks and grows will also cause the amount of scaling to shrink and grow proportionally as well.