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

Question

我正在为一个运行良好的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)));
    }

有什么想法吗？

Answer 1

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

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

将百分比除以比率，然后添加50px