我可以在CSS中使用Calc：Scale中的Scale功能吗？

Question

我正在尝试计算适用于父母内部孩子的正确比例，但我不能在calc() CSS函数中使用transform: scale。我已经使用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 ));
}

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

编辑：为了更好地解释它，在计算中找到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中的值，但不会运行scale。

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

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

工作范例：

在Url：MiWeb中，具有类的DIV：class =“cs_6c537e46d973809bcbd9abb882d9c7db cssprite”具有background-image属性，因为它使用sprite作为源。 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大（高度：250px 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/

Answer 2

尝试这个calc()既可以使用悬停选择器也可以使用它。但是你需要使用已经分配给它们的值，比如scale(0,1)你必须使用0和1之间的值。同样的翻译你必须使用px或%值。

.any{
     height:250px; /*this value can change dinamically */
     background:#f22;
    transform:translate(calc(100px - 50px));
   }
   .any:hover{
   transform:translate(calc(100px - 80px)); /*is using height value*/
   }

规模

  .any:hover{
       transform:scale(calc(1/2));
}

Answer 3

你可以使用calc，但你不能在transform:scale中使用百分比

但只要认为1 = 100％所以如果100%的值发生变化，1的值也会改变

例如：如果100％= 450px然后该值变为250px，则值1 = 250px = 100％

看到这里jsfiddle

代码：

.parent {
 width:200px;
 background:blue;
 height: 100%;

}

.child {
  transform:scale(calc(1/2));
  background:red;
}

如果你真的想要使用百分比，你必须使用JQ

或者您可以给我们一个工作示例，您认为您只需要百分比

编辑：

为你的例子。用这个

.et_pb_portfolio_item:last-child .et_pb_portfolio_image.landscape > div {
   background-position:center center!important;
   width:100%!important;
   height:100%!important;   

}