为什么此calc函数在转换比例下不起作用? [英] Why does this calc function not work in transform scale?

问题描述

calc()显然可以在转换中工作，但这不行:

calc() apparently works in a transform, but this does not:

transform: scale(calc(0.75 + (0.3 - 0.75) * ((100vw - 320px) / (780 - 320))));

这也可以，但是它基本上是相同的公式，只是百分数与小数.仅添加了此内容，以便您可以在此处查看公式:

Also, this works, but it's basically the same formula, only with a percent vs decimal. Only added this so you can see the formula works here:

right: calc(30% + (75 - 30) * ((100vw - 320px) / (780 - 320)));

我有一个容器，其宽度为百分比，例如，最大宽度为300px.我希望它的一个子项始终使用transform:scale()缩放到父项当前实际宽度的百分比.

I have a container that has a width as a percent, and max width of 300px, for example. I want a child of it to always scale, using transform:scale(), to a percent of the parent's actual current width.

为什么我的transform calc函数不起作用?使用Chrome.

Why does my transform calc function not work? Using Chrome.

100vw - 320px用于在最小宽度和最大窗口宽度之间进行计算.可以在这里做吗?

The 100vw - 320px is there to calculate between minimum an max size of the window width. Is it possible to do that here?

推荐答案

您有两个问题.第一个是关于无比例公式:

You have two issues. The first one is about the formula without scale:

calc(0.75 + (0.3 - 0.75) * ((100vw - 320px) / (780 - 320)))

这是无效的，因为您要添加number(0.75)和length((0.3 - 0.75) * ((100vw - 320px) / (780 - 320)))

This is invalid because you are adding a number (0.75) with a length ((0.3 - 0.75) * ((100vw - 320px) / (780 - 320)))

在+或-处，检查双方的类型是否相同，或者一侧是<number>，另一侧是<integer>.如果双方是同一类型，请解析为该类型.如果一侧是<number>，另一侧是<integer>，请解析为. ^参考

At + or -, check that both sides have the same type, or that one side is a <number> and the other is an <integer>. If both sides are the same type, resolve to that type. If one side is a <number> and the other is an <integer>, resolve to .^ref

第二个问题是，标度仅包含一个数字，因此您需要纠正公式以通过除去任何类型的单位(vw，px等)将第二部分转换为数字.

The second issue, is that scale only take a number so you need to correct the formula to transform the second part into a number by removing any kind of unit (vw,px,etc).

基本上，您无法执行此操作，因为您无法将(100vw - 320px)转换为数字，除非您考虑使用某些JS，因为CSS不是一种编程语言，所以这超出了CSS.即使使用JS，您也需要定义将像素数转换为非像素数的逻辑依据.

Basically, what you want to do cannot be done this way because you have no way to convert your (100vw - 320px) to a number unless you consider using some JS as this is beyond CSS because CSS is not a programming language. Even with JS you will need to define what is the logic behind transforming a pixel number to non-pixel number.

在right中和percentage中使用相同的公式将可以正常工作，因为:

Using the same formula within right and with percentage will work fine because:

如果在放置表达式的上下文中接受百分比，并且将百分比定义为相对于除<number>之外的另一种类型，则将<percentage-token>视为该类型.例如，在width属性中，百分比为<length>类型.如果在这种情况下<percentage>值与其他任何类型的值都不兼容，则百分比仅具有<percentage>类型.如果通常不允许用百分比代替calc()，则在该上下文中包含百分比的calc()表达式无效.

If percentages are accepted in the context in which the expression is placed, and they are defined to be relative to another type besides <number>, a <percentage-token> is treated as that type. For example, in the width property, percentages have the <length> type. A percentage only has the <percentage> type if in that context <percentage> values are not used-value compatible with any other type. If percentages are not normally allowed in place of the calc(), then a calc() expression containing percentages is invalid in that context.^ref

因此在这种情况下，允许百分比与right一起使用，因为我们可以解决它，因此forumla将有效，因为最后它会类似于A% + Bpx.

So in this case percentage is allowed to be used with right because we can resolve it thus the forumla will be valid because at the end it will be something like A% + Bpx.

这篇关于为什么此calc函数在转换比例下不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！