我可以使用Calc内变换:缩放功能在CSS

我试图计算正确的比例适用于父内的孩子，但我不能使用 calc() 内 transform: scale CSS函数。我已经用javascript完成了这个函数，但我对一个纯CSS解决方案感兴趣，以避免尽可能多地使用脚本使页面膨胀。

的例子:CSS

   .anyclass{
     height:250px; /*this value can change dinamically */
     transform:scale(calc(100% / 490 )); /*is using height value*/
   }

这个定义返回一个无效的属性值。其他用法如translate:

.anyclass{
transform:translate(calc(100% - 50px ));
}

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

编辑:为了更好地解释它，在计算中找到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*/

工作的例子:

在Url:MiWebclass="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 (height:250px aprox)大，我想只使用CSS来缩放图像，因为我想避免使用JS，以便更好地与浏览器兼容。

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

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

但是只要假设1 = 100%那么如果100%的值改变了，1的值也会改变

for example:如果100% = 450px，然后该值变为250px，则1 = 250px = 100%的值

参见此处jsfiddle

code:

.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;   
}

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

可以在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>

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

simple您可以使用transform: scale(calc(1 / 2)): p

相关内容

最新更新

热门标签：