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

Posted 2023-03-06

【中文标题】我可以在 CSS 中的 Transform:Scale 函数中使用 Calc 吗？

【英文标题】：Can I use Calc inside Transform:Scale function in CSS?

【发布时间】：2016-11-07 10:27:01

【问题描述】：

我正在尝试计算正确的比例以应用于父级内部的子级，但我无法在 transform: scale CSS 函数中使用 calc()。 我已经用 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中的值，但不操作刻度。

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

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

工作示例：

在网址中：MiWeb 具有类的 DIV：class="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 (height:250px aprox)，我想仅使用 CSS 缩放图像，因为我想避免使用 JS 以更好地与 JS 被阻止的浏览器兼容。

如果正确的值为 250px / 490px (scale(calc(100% / 490))，我想将该背景图像缩放到正确的大小。 CSS 是在输出之前和 CMS 的其他部分生成的，因此在生成 CSS 规则时我无法知道父 DIV 的实际大小。

【参考方案1】：

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

【讨论】：

但是如果我想使用百分比而不是固定值呢？因为我是根据 div 的高度来计算内容的比例？

我不确定我是否理解为什么您必须使用（例如）100% 或 64% 或 30% 而不是只使用 1、0.64 和 0.3？

他希望对象在用户缩放页面时保持相同的纵横比。因此，当用户缩小页面大小时，div 会线性缩放内容。

【参考方案2】：

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

但只要认为 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;   

【讨论】：

你说得对，我在开篇文章中添加了一个工作实例，可以访问我想要调整的网址。

不确定你想在那里做什么。您希望（在右上角的框中）使背景图像具有容器et_pb_portfolio_image 的width 和height？

是的，精灵的原始剪辑是 800*490px。背景图片所在的DIV是330*248px。因为我使用的是背景图像，而原始图像是雪碧，所以我不能使用背景尺寸：封面；因为精灵的总大小包括其他图像。如果您测试将 transform:scale(0.5) 添加到同一个 div 我指出您将看到完整图像的显示方式，现在它只是其中的一部分。

最后一个示例不起作用，因为图像来自 Sprite。 background-position:center center，不显示图片的右边部分。

谢谢。清除。就像 OP 一样，我在错误的树上吠叫，认为 transform: scale 中的 calc 是问题所在。

【参考方案3】：

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

【讨论】：

我需要按比例工作，而不是像开篇文章中写的那样翻译。不过还是谢谢。

@Andu 好的。但是在开始时，您试图扩展（100%/490）。所以这就是我所说的 calc() 与变换一起使用，但你必须根据那里的规则为它们分配值。

【参考方案4】：

您可以在 root 中定义 calc 并按比例使用它，但不支持 + and -。使用* or /

  :root
    --calc : calc(100%*3);
  
  .parent 
    width:200px;
    background:blue;
    height:auto;

  
  
  .child 

   transform:scale(calc(var(--calc)/2));

   background:red;
   
   

<div class="parent">


<div class="child">
BLALALALAL<br />
BABAKLALALA<br />
BALALALALA<br />
BALALALALA<br />
</div>
</div>

【参考方案5】：

简单的你可以使用transform: scale(calc(1 / 2)):P

【讨论】：

虽然此代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。