在 JS 中在任何视口上将剪辑路径插入正方形

Question

你好，这里是一个codepen，它显示了我的问题

我正在尝试进行 JS 计算，更改 div 的剪辑路径插入，使其显示一个正方形。
有一个限制：正方形宽度必须为 20vw

这是一张图像，展示了它在不同视口上的外观

我只是在寻找基于视口宽度/高度/比率的正确计算
我的大脑冻结了:(因此当前的计算是错误的:

const clipPathInset = Math.abs(((0.2 * window.innerWidth) + (ratioDifference * window.innerWidth)) / 100)  

square.style.clipPath = `inset(${clipPathInset}px 40vw)`;

有什么想法吗？
然后我将使用媒体查询重新调整方形宽度和/或调整事件监听器的大小

Answer 1

有人评论了，但评论已经不存在了
它给出了一个有效的解决方案

const squareWidth = 0.2 // equivalent to 20vw
const viewportRatio = window.innerWidth / window.innerHeight;
return window.innerWidth * (1 / viewportRatio - squareWidth) / 2;

我不明白为什么它有效，但它有效！谢谢你