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

Question

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

21

我正在尝试计算父元素中子元素应用的正确比例，但我无法在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 ));
}

没有问题地运作。有没有办法只使用CSS使用calc计算出一个div的正确比例?

编辑：为了更好地解释，这不是关于在0和1之间找到一个值的问题，因为计算可以做到这一点。如果我使用百分比，我只会得到无效的属性值。

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

在Chrome中，它似乎可以接受数值，但无法操作比例。

ZOOM CSS属性好像只有在Chrome中才能正常工作。这个是好的。

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

示例:

在链接地址MiWeb中，具有类名：class="cs_6c537e46d973809bcbd9abb882d9c7db cssprite"的DIV元素使用精灵作为背景图像，因此具有background-image属性。 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)要大，我想只使用CSS来缩放图像，因为我希望避免使用JS以提高与禁用JS的浏览器的兼容性。

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

- Andu

6个回答

0

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

- powerbuoy

3

要是我想使用百分比而不是固定值呢？因为我正在根据 div 的高度计算内容的比例尺？ - Andu

我不确定我理解为什么你必须使用（例如）100％或64％或30％，而不是只使用1、0.64和0.3呢？ - powerbuoy

5

当用户缩放页面时，他想要对象保持相同的宽高比。因此，当用户将页面调整到较小尺寸时，div 元素会线性缩放其内部内容。 - baash05

0

你可以在根目录中定义calc并在scale中使用，但不支持“+和-”。请使用“*或/”。

  :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>

- Hossein Azizdokht

0

我解决了一个类似的问题，通过更新一个额外的CSS变量来存储像素值，这样我就可以在缩放计算中使用该变量。例如，每次你这样做：

el.style.height = `${height}px

也要做

el.style.setProperty('--height-in-pixels', `${height}`

在CSS中，你可以使用该变量，比如如果你需要将其扩大10像素，那么可以这样写：

el {
  scale: calc(1 + 10 / var(--height-in-pixels)
}

- Grief

-1

尝试使用calc()，它既适用于悬停选择器，也适用于没有悬停选择器的情况。但是，您需要使用已经分配给它们的值，例如对于scale(0,1)，您必须使用0和1之间的值。对于translate，您必须使用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));
}

- frnt

我需要缩放工作，而不是像开头帖子中所写的那样进行翻译。但还是谢谢。 - Andu

@Andu 好的。但是一开始你试图缩放（100％/ 490）。所以我想说的是calc（）与transform一起使用，但你必须根据它们的规则为它们分配值。 - frnt

-3

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

- neel upadhyay

虽然这段代码可能解决了问题，但是包括解释它如何以及为什么解决了问题将有助于提高您的帖子质量，并可能导致更多的赞。请记住，您正在回答未来读者的问题，而不仅仅是现在提问的人。请[编辑]您的答案以添加解释并指出适用的限制和假设。 - Yunnosch

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mihai T · Accepted Answer

您可以使用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;   

}