CSS calc（）函数

我使用的是最新版本的Chrome，但在使用CSS calc（）函数时，开发工具中出现“Invalid Property”错误

我以前从未真正使用过它，所以我可能在这里做错了什么，尽管我看不出是什么。希望有人能帮我解决这个问题

这是我的密码

padding-top: calc(980px / 1980px) * 100;

这是用来计算背景图像上的填充顶部，这样我就可以在响应的背景图像上得到16:9的比例

答案是49.49%

我的css的这个特定部分的其余代码如下所示，以防css需要一些东西来解决这个问题

.hero{
/** Height 980px / Width 1980px * 100 -- Keeps image aspect at 16:9 **/
padding-top: calc(( 980px / 1980px ) * 100);

max-width:1980px;
background:url('images/default-bg.jpg') no-repeat center center #fff;
background-size:cover;

}

希望这是有道理的。我看过Can I use，不使用供应商前缀似乎不是问题

另一件需要注意的可能会影响这一点的事情是，我正在使用SCSS和Scout应用程序。我应该用SCSS计算来代替吗

只是想使用这个css函数，因为我以前从未使用过它

谢谢

---

Dan不能除以单位，只能除以。你正在使用的

padding top:calc（980px/1980px）*100

使用以下内容

padding-top:calc（980px/1980*100）


发布工作示例


.box{
宽度：500px；
高度：500px；
背景：番茄；
填料顶部：calc（980px/1980*100）；
}


Lorem ipsum dolor sit amet，奉献精英。鼹鼠科动物，驱避剂中的软体动物群？在vero perspiciatis velit，是否有一个新的国际公共部门会计准则？奈斯金。

您可以通过此。。。。
您根本不需要使用px作为单元。除以px/px将导致没有单位，因此没有必要将其放入计算中。简单地说：

padding-top: calc(980 / 1980 * 100%);

我刚刚测试过，它在Chrome中运行良好。
即使calc（）函数允许使用不同的单位，您也应该除以无单位数。
例如：

width: calc(500px / 50 *2)

有一篇很好的文章解释了calc（）函数
 与其使用像素，不如尝试使用calc（16em/9em）。您好，我也试过了，但什么也没发生，开发工具仍然说属性值无效。如果
.hero
是全宽元素，您可以简单地定义
高度：0；填充底部：56.25%
以创建16:9的容器。如果没有，那么将该样式指定给它的
：：在
伪元素之前，我只是想看看是否有一种动态的方法可以做到这一点，而无需硬编码答案。如果我更改了高度或宽度，则会以这种方式使用calc（），这将重新计算填充底部的%值。因此，您仍然在硬编码高度或宽度。我尝试了这种方法，但仍然得到一个错误，并且没有显示任何内容。请尝试
填充顶部：calc（100%/1980px*100）立即检查仍然有效的错误是的，我仍然得到错误。我想我必须承认，只是手动计算。检查我的更新答案在chrome使用
padding top:calc（980px/1980*100）中运行良好我尝试更改980px/1980px*100%，但仍有错误。如果它包含有效的代码版本，您只需不到一分钟的时间就可以编写，则我会将其更改为
+1
。但就其目前的形式而言，这是一个糟糕答案的完美例子@DanielWinnard，这就是Lars的意思
padding top:calc（（980px/1980）*100）
。这是正确的答案。如果你除以px/px，你的结果仍然是无单位的，对吗？这里有一个更简单的版本：
calc（98px/19800）
@AndreiGheorghiu我想说这是一个半完美的错误答案的例子，因为我可以用MDN的链接来回答，但你是对的，并且得到了我的支持：）通过将单位从
px
更改为
%
，这改变了预期的输出。很可能，这不是OP想要的。预期答案在
%
中。“答案是49.49%”。解释一下，这是为了填充最高响应纵横比技巧，这对我来说完全有意义。@AndreiGheorghiu你错了。我的答案中的规则确实有效，并正确地将元素的padding top设置为其宽度的49.49%。您可能需要阅读以下问题：。此技巧适用于填充顶部和底部。另外，请停止在评论中标记我，然后删除它们。有一件事我仍然不明白。为什么不使用
paddingtop:49.49%？至少它在比
calc（）
更多的浏览器中工作，并且上面的方法仍然是硬编码，但是使用了更详细的语法。您需要询问OP，这取决于您个人对浏览器和代码质量的要求。似乎除了IE11之外，所有的现代浏览器都能很好地处理它：
width: calc(500px / 50 *2)