17

我正在尝试计算正确的比例以应用于父母内部的孩子，但我不能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 ));
}

工作没有问题。无论如何我可以使用 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*/

工作示例：

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

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

4

5 回答 5

2

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

}
于 2016-07-05T14:56:10.660 回答
0

您可以在 root 中定义 calc 并在 scale 中使用它，但不支持+ 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>

于 2021-06-23T10:59:47.193 回答
0

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

于 2016-07-05T14:27:02.537 回答
0

试试这个calc()适用于悬停选择器和没有悬停选择器。但是您需要使用已经分配给它们的值，例如scale(0,1)您必须使用 and 之间的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-05T14:56:56.487 回答
-3

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

于 2021-06-28T05:49:52.727 回答