如何让div在视口居中并最大化同时保持自定义宽高比？

你已经用100vmin实现了完美的1:1响应式正方形，要改成2:1的宽高比其实很简单，这里有两种实用方案，你可以根据需求选择：

方案1：用CSS aspect-ratio 属性（首推，现代浏览器友好） #

这是目前最直观的实现方式，直接指定宽高比，浏览器会自动帮你维护比例，同时让容器最大化适配视口并居中。修改你的#content样式即可：

div#content {
  margin: auto;
  width: 100vmin; /* 以视口最小边为基准设置宽度 */
  aspect-ratio: 2 / 1; /* 明确指定宽:高 = 2:1 */
  background-color: blue;
}

如果你更希望以高度为基准适配视口，也可以把高度设为100vmin，宽度会自动按比例计算：

div#content {
  margin: auto;
  height: 100vmin;
  aspect-ratio: 2 / 1;
  background-color: blue;
}

aspect-ratio属性已经被所有现代浏览器支持（Chrome、Firefox、Safari 15.4+、Edge等），代码简洁逻辑清晰，完全能满足大多数场景。

方案2：基于vmin手动计算（兼容旧浏览器） #

如果需要兼容IE这类不支持aspect-ratio的旧浏览器，可以手动通过视口单位和尺寸限制来实现。核心思路是：根据宽高比，同时限制容器不超出视口的宽/高，确保比例始终成立。

对于2:1的宽高比，正确的代码写法如下：

div#content {
  margin: auto;
  width: min(100vw, 2 * 100vh); /* 宽度不超过视口宽，也不超过2倍视口高 */
  height: min(100vh, 100vw / 2); /* 高度不超过视口高，也不超过视口宽的一半 */
  background-color: blue;
}

这个写法的逻辑是：

• 当视口是宽屏（宽度 ≥ 2倍高度）：宽度取2倍视口高度，高度取视口高度，刚好填满视口高度且保持2:1比例，不会超出视口宽度。
• 当视口是竖屏（宽度 < 2倍高度）：宽度取视口宽度，高度取视口宽度的一半，完美适配竖屏视口同时维持2:1比例。

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