如何在动态容器中通过纯CSS/SASS按视口比例调整HTML div大小？

开发者阿泽

2026-8-14

解决方案

方法1：直接用calc计算高度

直接通过元素宽度乘以视口高宽比的倒数，得到与视口比例匹配的高度：

.element {
  width: 80%; /* 占容器宽度的80% */
  height: calc(80% * (100vh / 100vw));
}

原理：100vh / 100vw 是视口高度与宽度的比值，用元素宽度（容器宽度的80%）乘以该比值，就能让元素宽高比和视口保持一致。

方法2：修正aspect-ratio用法

你之前的思路没问题，只需确保浏览器兼容性（aspect-ratio支持Chrome 88+、Firefox 89+），同时可添加适配规则避免元素超出容器：

.element {
  width: 80%;
  aspect-ratio: calc(100vw / 100vh);
  /* 可选：限制元素最大高度不超过容器 */
  max-height: 100%;
  /* 可选：内部内容适配方式 */
  object-fit: contain;
}

方法3：伪元素模拟宽高比（兼容旧浏览器）

如果需要兼容不支持aspect-ratio的旧浏览器，可用伪元素的padding-top实现，同时支持内部元素灵活布局：

:root {
  --viewport-ratio: calc(100vh / 100vw);
}

.element {
  width: 80%;
  position: relative;
  overflow: hidden; /* 可选：防止内部内容溢出 */

  &::before {
    content: '';
    display: block;
    /* padding-top基于父元素宽度，乘以视口高宽比得到对应高度 */
    padding-top: calc(var(--viewport-ratio) * 100%);
  }

  // 内部元素可绝对定位铺满容器
  .element-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}