如何计算一个数字并将其转换为vw或vh？

Question

我对编程比较陌生，而且我遇到了一个问题。我想计算一个数字并将其转换为视口单元。

我想要做的计算是100 /高度*宽度，这个等式出来的数字应该在视口单元中。宽度和高度是我的代码中的预定义变量我尝试将等式放在所有类型的括号中，我尝试将视口单元放在等式中，如下所示：100vw / width = height。但是一切都给了我一个错误。

完整部分：

if (h / height > w / width) {
   container.style.width = [100 / width * height]vw;
   container.style.height = 100vw;
}

container.style.width = [100 / width * height]vw;

和

container.style.width = 100vw / width * height;

如果可以在javascript中使用，请告诉我。我不熟悉jquery所以jquery的答案对我没有帮助。我愿意学习如何在css中计算这样的东西，但我不知道如何实现if语句而不是。提前致谢！

Answer 1

假设你的width和height变量包含数字，先做数学运算，然后追加字符串“vw”：

container.style.width = (100 / width * height) + "vw"

Answer 2

首先检查正确的语法是否适用于您想要实现的目标。

if (h / height > w / width) {
   container.style.width = (100 / width * height) + 'vw';
   container.style.height = '100vw';
}

如果您可以提供有关如何确定vw和vh的“预定义变量”的更多信息。

如果你想找到哪个更大/更小，你可以直接使用vmin和vmax。

Answer 3

CSS在JavaScript中被视为字符串，因此您必须有引号才能使用它。在你的container.style.width和container.style.height中，你需要创建值字符串。有两种方法可以做到这一点。

首先，您可以按照它的方式保留它，但将其转换为计算+字符串：

if (h / height > w / width) {
    container.style.width = (100 / width * height) + "vw";
    container.style.height = "100vw";
}

或者您可以创建一个变量并在以下字符后追加该字符串：

if (h / height > w / width) {
    var width = (100 / width * height);
    container.style.width = width + "vw";
    container.style.height = "100vw";
}