calc() 创建一个根据设备纵横比缩放的画布

问题描述

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

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

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

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

理论上这是我期望需要做的。但问题是，对于 / 中的 * 和 calc()，它们需要 at least one of the values to be a number，特别是对于 /，正确的值必须是一个数字。>

如果没有 JavaScript，我该怎么做？此图像的高宽比会因设备而异，但没关系。我希望在单个设备的使用中保持的一致性。

编辑：我可以参考所需的最终尺寸计算出比率，但这意味着我需要为每个元素的宽度和高度执行此操作。如果我能以某种方式这样做，我可以根据需要声明宽度，我需要做的就是按 --device-ratio 缩放高度。如果没有，我需要手动计算每个元素的比率。当然有可能，只是费时。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）