Html calc（）创建根据设备纵横比缩放的画布

我正在尝试创建一个画布，它的大小取决于设备的比例。我有一个最终图像，我需要显示以下尺寸：

img {
    width: 100vw;
    height: 80vh;
}

此图像是从画布创建的。我需要根据预期的比例调整画布的大小。我想我可以通过计算（反向）纵横比并将其存储为变量来完成以下操作：

:root {
    --device-ratio: calc(80vh / 100vw);
}
.someCanvas {
    width: 50vw;
    height: calc(var(--device-ratio) * 50vw);
}

从理论上讲，这正是我所期望的。但问题是，对于

/

和

*

中的

/

，它们要求并且特别是对于

/

，正确的值必须是一个数字

如果没有JavaScript，我应该怎么做？此图像的高宽比将根据每个设备而有所不同，但这没关系。我希望在单个设备的使用范围内保持一致

---

编辑：我可以根据所需的最终尺寸计算出比率，但这意味着我需要对每个元素的宽度和高度进行计算。如果我能以某种方式做到这一点，我可以声明宽度是必要的，我所需要做的就是通过

——设备比率来缩放高度。如果不是，我需要手动计算每个元素的比率。当然可能，只是很费时。
我不确定我是否理解，但如果图像大小为宽度100vw，高度80vh，并且您希望画布具有相同的比例，则画布的宽度为50vw，因此它是图像的一半，因此高度为40vh，无需使用计算，这将与图像具有相同的比例。也许我遗漏了什么。@arieljuod对不起，是的，我应该把它包括在问题中。我当然可以使用这个比率，但我想知道这种依赖性是否可能。因为对于任何元素，我都可以声明一个宽度，对于高度，我只需要通过
--设备比率来缩放宽度。如果不是，对于每个元素，我需要确定主元素的比率，然后将该比率用于高度。这不是一个困难的过程，只是更耗时。