是否有一种 CSS 方法可以保证在不滚动的情况下适合窗口的正方形？

Question

我可以很容易地在 JavaScript 中做到这一点，但想知道是否可以使用直接的 CSS：在适合窗口大小的窗口中保留一个方形 div，不管它是什么。

我发现的任何解决方案都没有考虑到高度小于宽度。

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

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

Answer 1

我建议使用该vmin单元。

来源

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

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

vmin
等于 vw 和 vh 中的较小者。

例子

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

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>