我可以在CSS的Transform：Scale函数中使用Calc吗？

Question

我正在尝试计算适用于父母内部的孩子的正确比例，但是我不能calc()在transform: scaleCSS函数内部使用。我已经使用javascript完成了此功能，但我对纯CSS解决方案感兴趣，以避免尽可能多地使用脚本来膨胀页面。

示例： CSS

   .anyclass{
     height:250px; /*this value can change dinamically */
     transform:scale(calc(100% / 490 )); /*is using height value*/
   }

此定义返回一个无效的属性值。其他用途，例如笔译：

.anyclass{
transform:translate(calc(100% - 50px ));
}

没问题。无论如何，我可以仅使用CSS使用calc来计算div的正确比例吗？

编辑：为了更好地说明它，因为findind的计算结果是0到1之间的值，所以这不是问题。如果使用百分比，我只会得到无效的属性值。

测试1，我尝试使用CSS3变量，但在Scale函数中没有结果

--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*/

它似乎接受chrome中的值，但不操作比例尺。

ZOOM CSS属性似乎只能在chrome中正常工作。这很好。

zoom: calc(100% / 1.490); /* It needs the original value to be divided by 1000 to work properly*/

工作示例：

在Url：MiWeb 中，类别为：class =“ cs_6c537e46d973809bcbd9abb882d9c7db cssprite”的DIV具有背景图像属性，因为它使用了一个精灵作为源。 的CSS

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;

现在，原始图片大于可见的div（高度：250像素aprox），我想仅使用CSS缩放图片，因为我想避免使用JS来更好地与JS阻止的浏览器兼容。

我想将背景图像缩放到正确的大小，正确的值将是250px / 490px（scale（calc（100％/ 490））。CSS在输出之前和CMS的其他部分中生成，所以我不能生成CS规则时，知道父DIV的实际大小。

Answer 1

比例应该是 0 到 1 之间的浮点数。请改用transform: scale(calc(1 / 2))：https ://jsfiddle.net/L1w7501o/