CSS calc()函数

Question

我正在使用最新版本的Chrome，但在使用calc()函数时，在Dev工具中出现了一个“无效属性”错误。

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

这是我的密码。

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;

}

希望这是合理的。我看了一下我是否可以使用，这似乎不是一个不使用供应商前缀的问题。

另外要注意的是，我正在使用SCSS和Scout，这可能会影响到这一点。我应该用SCSS计算来代替吗？

只是想使用这个css功能，因为我从来没有使用过它。

谢谢丹

Answer 1

你不能被单位除以，只能除以数字。

Answer 2

您正在使用

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

使用跟随

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

calc指南

发布一个工作示例

​

.box {
  width:500px;
  height:500px;
  background:tomato;
  padding-top: calc(980px / 1980 * 100);
}

<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque molestiae, quos mollitia dolorum id eaque in repellendus? Quae itaque numquam ipsa quasi eos, ea ullam at vero perspiciatis velit? Nesciunt.
</p>
</div>

​

Answer 3

你可以通过这个得到你想要的..。

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