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

我试图计算适用于儿童的父母中右边的刻度，但我不能使用calc()内transform: scale CSS功能。我已经使用javascript完成了这个功能，但是我对纯粹的CSS解决方案感兴趣，以避免使用脚本尽可能地膨胀页面。我可以在Transform中使用Calc：Scale函数在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？

编辑：为了更好地解释它，在计算过程中findind一个介于0和1之间的值不是问题。如果我使用百分比，我只会得到无效的属性值。

TEST 1 我试着用CSS3变量没有结果的尺度功能

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

似乎接受铬的值，但不工作的规模。

变焦 CSS属性似乎只在铬你工作得很好。这工作正常。

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

工作实施例：

在URL：MiWeb 的DIV与类：类= “cs_6c537e46d973809bcbd9abb882d9c7db cssprite” 具有背景图片属性，因为它使用的子画面作为源。 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屏蔽的浏览器更好的兼容性。

Id喜欢该背景图像缩放到合适的大小是正确的值将是250像素/ 490px（规模（计算值（100％/ 490））。在输出之前，将生成的CSS和在其它部位的CMS，所以我无法知道生成CS规则时父DIV的实际大小。

来源

2016-07-05 Andu

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

来源

2016-07-05 14:27:02 powerbuoy

但是，如果我想使用百分比，而不是一个固定值？因为我正在计算基于div高度的内容的比例？ – Andu

我不确定我是否理解为什么您必须使用（例如）100％或64％或30％，而不是仅使用1,0.64和0.3？ – powerbuoy

你可以使用calc，但你不能在transform:scale

使用个只是觉得1 = 100％，因此如果100%变化的价值，1值将发生变化也

为例如：如果100％= 450像素，然后将该值变为250像素，1 = 250像素= 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; 

}

来源

2016-07-05 14:56:10

你是对的，我在开篇文章中添加了一个可用的实例，可以访问我想调整的url。 – Andu

不知道你在那里做什么。你想（在右上角的框中）使背景图像具有容器'et_pb_portfolio_image'的'width'和'height'？ –

是的，精灵的原始剪辑是800 * 490px。放置背景图像的DIV是330 * 248px。因为我使用背景图像和原始图像是一个雪碧我不能使用background-size：cover;因为精灵的总大小包含其他图像。如果你测试添加transform：scale（0.5）到同一个div，我指出你会看到整个图像如何显示，现在它只是它的一部分。 – Andu

试试这个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)); 
}

来源

2016-07-05 14:56:56 frnt

我需要规模才能工作，而不是像在开场白中写的那样翻译。不过谢谢。 – Andu

@Andu好的。但是在开始时你试图扩展（100％/ 490）。所以这就是我所说的calc（）与变换一起工作，但是您必须根据规则为它们分配值。 – frnt

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

回答

相关问题