如何用JS计算clip-path inset值，在任意视口显示20vw宽的正方形？

核心需求 #

通过调整clip-path: inset()属性，让目标div显示一个宽度固定为20vw的正方形，仅需基于视口宽/高/比例的计算逻辑。

错误逻辑问题分析 #

你当前的代码错误在于将vw单位强行转成px计算，且比例差值的逻辑混乱，没有抓住正方形的核心约束——必须保证裁剪后的区域宽高均为20vw。

正确计算思路 #

正方形的边长固定为20vw，因此：

1. 左右方向inset：视口总宽度为100vw，要留出20vw的宽度，左右各需裁剪(100vw - 20vw)/2 = 40vw，这个值是固定的。
2. 上下方向inset：视口总高度为100vh，要让裁剪后的高度等于20vw，上下各需裁剪(100vh - 20vw)/2——这个值会根据视口宽高比动态变化：
   • 当视口高度 ≥ 20vw时，该值为正，裁剪掉上下多余区域，得到居中的20vw×20vw正方形；
   • 当视口高度 < 20vw时，该值为负，inset的负数会让裁剪区域向上下延伸，保证正方形高度仍为20vw（此时正方形上下部分会超出容器边界）。

最简实现代码 #

直接用CSS calc() 配合相对单位，无需JS计算px值，逻辑更简洁且原生适配视口变化：

const square = document.querySelector('.your-square-selector');

// 计算并设置clip-path
function setSquareClipPath() {
  const verticalInset = 'calc((100vh - 20vw)/2)';
  const horizontalInset = '40vw';
  square.style.clipPath = `inset(${verticalInset} ${horizontalInset})`;
}

// 初始化执行
setSquareClipPath();
// 配合resize监听（按需添加）
window.addEventListener('resize', setSquareClipPath);

若需JS数值计算（可选） #

如果必须在JS中计算具体数值（比如转成百分比），公式如下：

function setSquareClipPath() {
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;
  // 目标正方形边长（px）
  const squareSize = 0.2 * viewportWidth;
  // 上下inset的px值
  const verticalInsetPx = (viewportHeight - squareSize) / 2;
  // 左右inset的px值
  const horizontalInsetPx = (viewportWidth - squareSize) / 2;
  
  // 转成vw单位（或直接用px）
  const verticalInsetVw = (verticalInsetPx / viewportWidth) * 100;
  const horizontalInsetVw = (horizontalInsetPx / viewportWidth) * 100;
  
  square.style.clipPath = `inset(${verticalInsetVw}vw ${horizontalInsetVw}vw)`;
}

内容的提问来源于stack exchange，提问作者AnnaGino