如何使用CSS计算当前视口（viewport）的宽高比？

你可以利用CSS的aspect-ratio属性直接绑定视口宽高比，无需JavaScript就能实现需求。这个属性支持用视口单位作为比例参数，完美避开calc()无法做单位除法的限制。

实现代码 #

.container {
  width: 240px;
  height: 160px;
  background: #ddd;
  /* 可选：让微缩图在容器内居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.viewport-miniature {
  /* 直接设置为当前视口的宽高比 */
  aspect-ratio: 100vw / 100vh;
  /* 限制尺寸不超出容器 */
  max-width: 100%;
  max-height: 100%;
  background: pink;
}

<div class="container">
  <div class="viewport-miniature"></div>
</div>

原理说明 #

• aspect-ratio: 100vw / 100vh：100vw对应视口宽度，100vh对应视口高度，这个属性会强制元素保持与当前视口完全一致的宽高比。
• max-width: 100%和max-height: 100%：让元素自动适配容器的最大可用空间，优先填满宽度或高度（取决于视口比例与容器比例的匹配情况），同时保持比例不变。

旧浏览器兼容方案 #

如果需要兼容不支持aspect-ratio的浏览器（如IE），可以结合少量JavaScript动态计算视口比例，再用CSS变量实现：

// 计算并设置视口比例变量
document.documentElement.style.setProperty(
  '--viewport-ratio',
  window.innerWidth / window.innerHeight
);

// 窗口 resize 时更新比例
window.addEventListener('resize', () => {
  document.documentElement.style.setProperty(
    '--viewport-ratio',
    window.innerWidth / window.innerHeight
  );
});

.viewport-miniature {
  height: 0;
  /* 用变量计算内边距百分比 */
  padding-bottom: calc(100% / var(--viewport-ratio));
  max-width: 100%;
  max-height: 100%;
  background: pink;
}

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