有没有一种 CSS 方法可以保证正方形适合窗口而不滚动？

我可以在 JavaScript 中轻松完成此操作，但想知道是否可以使用直接 CSS：在窗口中保留一个适合窗口大小的方形 div，无论它是什么。

我发现的任何解决方案都不能解决高度小于宽度的问题。

从逻辑上讲，我想要的是，当窗口宽度小于高度时，给我一个该宽度的正方形。如果高度较小，则给我一个该大小的正方形。

我见过的最接近的解决方案使用以 vw 为单位测量的宽度和高度，但当窗口非常宽和短时它不起作用。

我建议使用vmin unit.

Source

来自MDN 上的视口百分比长度文档:

视口百分比长度定义相对于视口（即文档的可见部分）大小的值。视口长度在 @page 声明块中无效。

vmin
等于 vw 和 vh 中较小的一个。

Example

使用完整页面链接通过浏览器中的示例对其进行测试。

body {
  /* So the whole viewport can be used by the square. */
  margin: 0;
}

#sqr {
  /* Uses the 'outer' (i.e. border-box) size when setting width and height. */
  box-sizing: border-box;
  width: 100vmin;
  height: 100vmin;
  background-color: red;
  border: yellow 10px solid;
}

<div id="sqr"><div>