如何实现DIV容器在调整窗口宽高时均等比例缩放的CSS方案

你想要实现容器在调整浏览器宽、高时都能保持固定比例缩放，可以直接用以下方案，比你现有写法更简洁：

推荐方案（兼容Chrome 88+/Firefox 89+/Safari 15.4+，覆盖95%以上用户场景） #

直接用CSS原生aspect-ratio属性指定宽高比，搭配min()函数同时绑定视口宽高：

#container {
  /* 取两个计算值中更小的一个，确保容器永远不会超出视口范围 */
  width: min(100vw, calc(100vh / 1.72));
  /* 直接指定宽高比为 1:1.72，浏览器自动计算对应高度，无需手动写height */
  aspect-ratio: 1 / 1.72;
  background: red;
  /* 可选：需要容器水平居中可加以下属性 */
  margin: 0 auto;
}

旧浏览器兼容方案（支持所有现代浏览器及IE11） #

如果需要兼容不支持aspect-ratio的旧版本浏览器，可以用传统padding百分比方案实现：

#container {
  width: min(100vw, calc(100vh / 1.72));
  position: relative;
  background: red;
  margin: 0 auto;
}
#container::before {
  content: "";
  display: block;
  /* padding-top百分比相对于容器宽度，172%对应宽高比1:1.72 */
  padding-top: 172%;
}
/* 如果容器内有内容，需要给内容加绝对定位铺满容器 */
#container .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

对应的HTML结构调整为：

<div id="container">
  <div class="content">
    <!-- 容器内原有内容放在这里 -->
  </div>
</div>

原代码问题说明 #

你原有代码的高度只和vw（视口宽度）单位绑定，完全没有关联vh（视口高度），所以调整浏览器窗口高度时不会触发高度变化。上述两种方案都同时引入了vw和vh两个单位做边界判断，不管调整窗口宽度还是高度都会触发缩放。

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