将像素值添加到 CSS 百分比变量答案

【问题标题】：Adding a pixel value to a CSS percentage variable将像素值添加到 CSS 百分比变量
【发布时间】：2021-02-10 17:19:22
【问题描述】：

我正在为运行良好的 iframe 创建一个视频框。它接受一个 css 变量参数 16/9，并将使用它来计算视频以正确的纵横比显示所需的填充百分比（在本例中为 16/9）。

我有一个问题，我有一个播放列表 div，它向正在计算的框添加了额外的 50px - 这是 CSS。对于这个填充底部，如果满足某个条件，我需要在填充中添加额外的 50px 吗？你会如何使用 calc 来做到这一点？

  [style*="--aspect-ratio"]::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio)));
    }

这不起作用，因为它是一个百分比值 - 是从计算中计算出来的？

[style*="--aspect-ratio"]::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio + 50)));
    }

有什么想法吗？

【问题讨论】：

var(--aspect-ratio) + 50 因为50 不是变量名的一部分，这只是作为第一个参数传递给var 的全部内容。
此外，您还需要50 的单位 - 就其本身而言，50 没有任何意义，您需要 50px。

标签： css css-variables

【解决方案1】：

您需要更正您的代码，如下所示：

padding-bottom: calc((100% / var(--aspect-ratio)) + 50px);

你用百分比除以比率，然后你加上50px

【讨论】：