Question

这是平视，不是问题。

当变量的值不是整数时，在calc()函数中使用除法时，我遇到了CSS变量的问题。

这可能特定于Google Chrome版本69.0.3497.100。

这是失败的代码：

HTML：

<iframe style="
          --width:12800/10;
          --height:7200/10;
        "
        src="https://www.youtube.com/embed/fUyU3lKzoio"
        frameborder="0"
        allowfullscreen>
</iframe>

CSS：

iframe {
  width:  100vw;
  height: 100vh;
  max-width:  calc(100vh * var(--width) / var(--height));
  max-height: calc(100vw / var(--width) * var(--height));
}

在max-height的计算中除以浮点值显然会导致calc()函数返回零（或其他一些不可用的值）。

以下是HTML代码，它们可以使用完全相同的CSS calc()函数来工作。除一个细节外，该除法是相同的：除数是一个整数。

HTML：

<iframe style="
          --width:1280;
          --height:720;
        "
        src="https://www.youtube.com/embed/fUyU3lKzoio"
        frameborder="0"
        allowfullscreen>
</iframe>

当变量不是整数时，除以CSS变量

0 个答案: