title: Can I use Calc inside Transform:Scale function in CSS?
body: <p>I'm trying to calculate the right scale to apply to children inside a parent but i can't use <strong><code>calc()</code></strong> inside <strong><code>transform: scale</code></strong> CSS function.
  I've done this function with javascript but i'm interested in a pure CSS solution to avoid bloating the page with scripts as much as possible.</p>
  <p>Example:
  <strong>CSS</strong></p>
  <pre><code>   .anyclass{
       height:250px; /*this value can change dinamically */
       transform:scale(calc(100% / 490 )); /*is using height value*/
     }
  </code></pre>
  <p>This definition gives back an invalid property value.
  Other uses like translate:</p>
  <pre><code>.anyclass{
  transform:translate(calc(100% - 50px ));
  }
  </code></pre>
  <p>works with no problem.
  Is there anyway I could use calc to calculate the right scale of a div using only CSS?</p>
  <p><em>Edit: To explain it better, is not a problem about findind a value between 0 and 1 as the calculation does that. I just get invalid property value if i use percentages.</em></p>
  <p>TEST 1
  I tried with CSS3 variables with no result in Scale function</p>
  <pre><code>--height: calc(100% + 0px);
  /* height: calc(var(--height) / 490); Calculates the right value: 0.5 */
  --soom: calc(var(--height) / 490);
  /* height: var(--soom); has the right value: 0.5 */
  transform: scale(var(--soom)); /*Does not operate in the value stored in --soom*/
  </code></pre>
  <p>It seems to accept the values in chrome, but does not operate the scale.</p>
  <p><strong>ZOOM</strong> CSS property seems to work fine only in chrome thou. This works fine.</p>
  <pre><code>zoom: calc(100% / 1.490); /* It needs the original value to be divided by 1000 to work properly*/
  </code></pre>
  <p>Working example:</p>
  <p>In the Url:<a href="http://arturoemilio.es" rel="nofollow noreferrer">MiWeb</a>
  the DIV with the class: class=&quot;cs_6c537e46d973809bcbd9abb882d9c7db cssprite&quot;
  has a background-image property because it uses an sprite as source.
  <strong>CSS</strong></p>
  <pre><code>background-position: 0 -840px;
      width: 800px;
      height: 490px;
      background-image: url(https://cdn.arturoemilio.es/wp-content/cache/CSS_Sprite/93db60ac3df9134d96d56dd178d4ebf3279fdb39_S.png);
      background-repeat: no-repeat;
      display: inline-block;
      position: initial;
  </code></pre>
  <p>Now the original image is bigger than the visible div <code>(height:250px aprox)</code>, I'd like to scale the image using only CSS as I'd like to avoid to use JS for better compatibility with browsers with JS blocked.</p>
  <p>Id like to scale that background image to the right size were the correct value would be 250px / 490px (<em>scale(calc(100% / 490)</em>).
  The CSS is generated before the output and in other parts of the CMS so i can not know the actual size of the parent DIV when the CSs rules are generated.</p>