我可以在CSS的Transform：Scale函数中使用Calc吗？ [英] Can i use Calc inside Transform:Scale function in CSS?

问题描述

我正在尝试计算适用于父母内部孩子的正确比例，但是我不能在<内部>使用 calc（） strong> transform：scale CSS函数。
我已经使用javascript完成了此功能，但我对纯CSS解决方案感兴趣，以避免尽可能多地使用脚本使页面过大。

I'm trying to calculate the right scale to apply to children inside a parent but i can't use calc() inside transform: scale CSS function. I've done this function with javascript but i'm interested in a pure CSS solution to avoid bloating the page with scripts as much as possible.

例如：
CSS

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

此定义会返回无效的属性值。
其他用法，例如：

This definition gives back an invalid property value. Other uses like translate:

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

正常工作。
无论如何，我是否可以仅使用CSS使用calc来计算div的正确比例？

works with no problem. Is there anyway i could use calc to calculate the right scale of a div using only CSS?

编辑：为了更好地解释它，因为findind的值在0到1之间，所以这不是问题。如果使用百分比，我只会得到无效的属性值。

TEST 1
我尝试了CSS3变量，但在Scale函数中没有结果

TEST 1 I tried with CSS3 variables with no result in Scale function

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

中的值进行操作

ZOOM CSS属性似乎仅在chrome中有效。

ZOOM CSS property seems to work fine only in chrome thou. This works fine.

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

工作示例：

在网址中： MiWeb
DIV与class：class = 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（高度：250像素aprox），我想只能使用CSS缩放图像，因为我想避免使用JS与JS被阻止的浏览器更好地兼容。

Now the original image is bigger than the visible div (height:250px aprox), i'd like to scale the image using only CSS as i'd like to avoid to use JS for better compatibility with browsers with JS blocked.

Id喜欢将背景图像缩放到正确的大小是正确的值将是250px / 490px（ scale（calc（100％/ 490））。
CSS是在输出之前以及在CMS的其他部分中生成的，所以我

Id like to scale that background image to the right size were the correct value would be 250px / 490px (scale(calc(100% / 490)). The CSS is generated before the output and in other parts of the CMS so i can not know the actual size of the parent DIV when the CSs rules are generated.

推荐答案

您可以 >使用 calc ，但不能在 transform：scale

you can use calc but you cannot use percentage in transform:scale

，但只要认为1 = 100％，那么如果 100％的值发生变化，则 1的值也将更改

but just think that 1 = 100% so if the value of 100% changes , the value of 1 will change also

例如：如果100％= 450px，然后该值更改为250px，则1 = 250px = 100％

for eg : if 100% = 450px and then that value changes to 250px , the value of 1 = 250px = 100%

请参见 jsfiddle

see here jsfiddle

code：

.parent {
 width:200px;
 background:blue;
 height: 100%;

}

.child {
  transform:scale(calc(1/2));
  background:red;
}

如果您真正要使用百分比，您必须使用JQ

if you REALLY want to use percentage , you have to use JQ

，或者您可以给我们提供一个工作示例，认为您只需要百分比

or you can give us a working example where you think you need only percentage

编辑：

例如。使用此

.et_pb_portfolio_item:last-child .et_pb_portfolio_image.landscape > div {
   background-position:center center!important;
   width:100%!important;
   height:100%!important;   

}

这篇关于我可以在CSS的Transform：Scale函数中使用Calc吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！